[V0_FILE]typescriptreact:file="components/mode-toggle.tsx" "use client" import { Moon, Sun } from "lucide-react" import { useTheme } from "next-themes" import { Button } from "@/components/ui/button" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu" export function ModeToggle() { const { setTheme } = useTheme() return ( setTheme("light")}>Light setTheme("dark")}>Dark setTheme("system")}>System ) } [V0_FILE]typescriptreact:file="components/account-overview.tsx" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" const accounts = [ { name: "Checking", balance: 5240.23 }, { name: "Savings", balance: 12750.89 }, { name: "Investment", balance: 7890.45 }, ] export function AccountOverview() { const totalBalance = accounts.reduce((sum, account) => sum + account.balance, 0) return ( Account Overview

${totalBalance.toFixed(2)}

{accounts.map((account) => (

{account.name} ${account.balance.toFixed(2)}

))}

) } [V0_FILE]typescriptreact:file="components/recent-transactions.tsx" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { ArrowUpRight, ArrowDownRight } from "lucide-react" const transactions = [ { id: 1, name: "Amazon.com", amount: -129.99, date: "2023-07-15", type: "expense" }, { id: 2, name: "Whole Foods Market", amount: -89.72, date: "2023-07-10", type: "expense" }, { id: 3, name: "Netflix Subscription", amount: -15.99, date: "2023-07-05", type: "expense" }, { id: 4, name: "Freelance Payment", amount: 750, date: "2023-07-12", type: "income" }, { id: 5, name: "Gas Station", amount: -45.5, date: "2023-07-18", type: "expense" }, ] export function RecentTransactions() { return ( Recent Transactions

{transactions.slice(0, 3).map((transaction) => (

{transaction.name}

{transaction.date}

{transaction.type === "income" ? "+" : "-"}${Math.abs(transaction.amount).toFixed(2)} {transaction.type === "income" ? ( ) : ( )}

))}

) } [V0_FILE]typescriptreact:file="components/quick-actions.tsx" "use client" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { PlusCircle, SendHorizontal, CreditCard } from "lucide-react" import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger, } from "@/components/ui/dialog" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" function ActionDialog({ title, description, actionText }: { title: string; description: string; actionText: string }) { return ( ) } export function QuickActions() { return ( Quick Actions ) } [V0_FILE]typescriptreact:file="components/financial-chart.tsx" "use client" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Line, LineChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts" const data = [ { month: "Jan", income: 2000, expenses: 1800 }, { month: "Feb", income: 2200, expenses: 1900 }, { month: "Mar", income: 2400, expenses: 2000 }, { month: "Apr", income: 2600, expenses: 2200 }, { month: "May", income: 2800, expenses: 2400 }, { month: "Jun", income: 3000, expenses: 2600 }, ] export function FinancialChart() { return ( Financial Overview

`$${value}`} />

) } [V0_FILE]typescriptreact:file="components/layout.tsx" isFixed="true" isQuickEdit="true" import type React from "react" import { Sidebar } from "./sidebar" import { TopNav } from "./top-nav" export default function Layout({ children }: { children: React.ReactNode }) { return (

{children}

) } [V0_FILE]typescriptreact:file="components/content.tsx" import { List01 } from "./list01" import { List02 } from "./list02" import { List03 } from "./list03" export function Content() { return (

) } [V0_FILE]typescriptreact:file="components/list01.tsx" import { Wallet, Plus, Send, CreditCard, MoreHorizontal } from "lucide-react" import { Modal } from "./modal" const accounts = [ { name: "Checking", balance: 5240.23 }, { name: "Savings", balance: 12750.89 }, { name: "Investment", balance: 7890.45 }, ] export function List01() { const totalBalance = accounts.reduce((sum, account) => sum + account.balance, 0) return (

Accounts

${totalBalance.toFixed(2)}

{accounts.map((account) => (

{account.name} ${account.balance.toFixed(2)}

))}

Add } title="Add Funds" description="Add funds to your account" /> Send } title="Send Money" description="Send money to another account" /> Top-up } title="Top Up" description="Top up your account" />

) } [V0_FILE]typescriptreact:file="components/list02.tsx" import { CreditCard, ShoppingCart, Wallet, ArrowUpRight, ArrowDownRight } from "lucide-react" const transactions = [ { id: 1, title: "Online Purchase", amount: -89.99, date: "2023-06-15", icon: ShoppingCart, type: "expense" }, { id: 2, title: "Salary Deposit", amount: 3500, date: "2023-06-01", icon: Wallet, type: "income" }, { id: 3, title: "Grocery Shopping", amount: -156.23, date: "2023-06-10", icon: ShoppingCart, type: "expense" }, { id: 4, title: "ATM Withdrawal", amount: -200, date: "2023-06-05", icon: CreditCard, type: "expense" }, { id: 5, title: "Freelance Payment", amount: 750, date: "2023-06-12", icon: Wallet, type: "income" }, ] export function List02() { return (

Recent Transactions

{transactions.map((transaction) => (

{transaction.title}

{transaction.date}

{transaction.type === "income" ? "+" : "-"}${Math.abs(transaction.amount).toFixed(2)} {transaction.type === "income" ? ( ) : ( )}

))}

) } [V0_FILE]typescriptreact:file="components/list03.tsx" import { Calendar, PiggyBank, TrendingUp, CreditCard, ArrowRight } from "lucide-react" const events = [ { id: 1, title: "Emergency Fund", subtitle: "3 months of expenses saved", icon: PiggyBank, status: "In Progress", progress: 65, target: 15000, date: "Dec 2024", }, { id: 2, title: "Stock Portfolio", subtitle: "Tech sector investment plan", icon: TrendingUp, status: "Pending", progress: 30, target: 50000, date: "Jun 2024", }, { id: 3, title: "Debt Repayment", subtitle: "Student loan payoff plan", icon: CreditCard, status: "In Progress", progress: 45, target: 25000, date: "Mar 2025", }, ] const statusColors = { Pending: "bg-yellow-100 text-yellow-800", "In Progress": "bg-blue-100 text-blue-800", Completed: "bg-green-100 text-green-800", } export function List03() { return (

Upcoming Events

{events.map((event) => (

{event.status}

{event.title}

{event.subtitle}

${event.target.toLocaleString()} target {event.date}

))}

) } [V0_FILE]typescriptreact:file="components/theme-toggle.tsx" "use client" import { Moon, Sun } from "lucide-react" import { useTheme } from "next-themes" export function ThemeToggle() { const { theme, setTheme } = useTheme() return ( ) } [V0_FILE]typescriptreact:file="components/profile01.tsx" import { ChevronDown } from "lucide-react" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" export function Profile01() { return ( CN My Account Profile Settings Logout ) } [V0_FILE]typescriptreact:file="components/function-modal.tsx" isFixed="true" isQuickEdit="true" import { Button } from "@/components/ui/button" import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger, } from "@/components/ui/dialog" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import type React from "react" // Import React interface FunctionModalProps { title: string description: string actionText: string icon: React.ReactNode } export function FunctionModal({ title, description, actionText, icon }: FunctionModalProps) { return ( ) } [V0_FILE]typescriptreact:file="components/upcoming-events.tsx" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Calendar, PiggyBank, TrendingUp, CreditCard, ArrowRight } from "lucide-react" const events = [ { id: 1, title: "Emergency Fund", subtitle: "3 months of expenses saved", icon: PiggyBank, status: "In Progress", progress: 65, target: 15000, date: "Dec 2024", }, { id: 2, title: "Stock Portfolio", subtitle: "Tech sector investment plan", icon: TrendingUp, status: "Pending", progress: 30, target: 50000, date: "Jun 2024", }, { id: 3, title: "Debt Repayment", subtitle: "Student loan payoff plan", icon: CreditCard, status: "In Progress", progress: 45, target: 25000, date: "Mar 2025", }, ] const statusColors = { Pending: "bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200", "In Progress": "bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200", Completed: "bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200", } export function UpcomingEvents() { return (

Upcoming Events

{events.map((event) => ( {event.title}

{event.subtitle}

{event.status} {event.date}

${event.target.toLocaleString()} {event.progress}% complete

))}

) } [V0_FILE]css:file="styles/scrollbar-hide.css" /* Hide scrollbar for Chrome, Safari and Opera */ .scrollbar-hide::-webkit-scrollbar { display: none; } /* Hide scrollbar for IE, Edge and Firefox */ .scrollbar-hide { -ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none; /* Firefox */ } [V0_FILE]javascript:file="tailwind.config.js" isFixed="true" isQuickEdit="true" /** @type {import('tailwindcss').Config} */ module.exports = { darkMode: ["class"], content: [ "./pages/**/*.{ts,tsx,js,jsx,mdx}", "./components/**/*.{ts,tsx,js,jsx,mdx}", "./app/**/*.{ts,tsx,js,jsx,mdx}", "./src/**/*.{ts,tsx}", ], theme: { container: { center: true, padding: "2rem", screens: { "2xl": "1400px", }, }, extend: { colors: { border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))", }, secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, keyframes: { "accordion-down": { from: { height: 0 }, to: { height: "var(--radix-accordion-content-height)" }, }, "accordion-up": { from: { height: "var(--radix-accordion-content-height)" }, to: { height: 0 }, }, }, animation: { "accordion-down": "accordion-down 0.2s ease-out", "accordion-up": "accordion-up 0.2s ease-out", }, }, }, plugins: [require("tailwindcss-animate")], } [V0_FILE]css:file="app/globals.css" @tailwind base; @tailwind components; @tailwind utilities; @layer base { :root { --background: 0 0% 100%; --foreground: 222.2 47.4% 11.2%; --muted: 210 40% 96.1%; --muted-foreground: 215.4 16.3% 46.9%; --popover: 0 0% 100%; --popover-foreground: 222.2 47.4% 11.2%; --card: 0 0% 100%; --card-foreground: 222.2 47.4% 11.2%; --border: 214.3 31.8% 91.4%; --input: 214.3 31.8% 91.4%; --primary: 222.2 47.4% 11.2%; --primary-foreground: 210 40% 98%; --secondary: 210 40% 96.1%; --secondary-foreground: 222.2 47.4% 11.2%; --accent: 210 40% 96.1%; --accent-foreground: 222.2 47.4% 11.2%; --destructive: 0 100% 50%; --destructive-foreground: 210 40% 98%; --ring: 215 20.2% 65.1%; --radius: 0.5rem; } .dark { --background: 224 71% 4%; --foreground: 213 31% 91%; --muted: 223 47% 11%; --muted-foreground: 215.4 16.3% 56.9%; --popover: 224 71% 4%; --popover-foreground: 215 20.2% 65.1%; --card: 224 71% 4%; --card-foreground: 213 31% 91%; --border: 216 34% 17%; --input: 216 34% 17%; --primary: 210 40% 98%; --primary-foreground: 222.2 47.4% 1.2%; --secondary: 222.2 47.4% 11.2%; --secondary-foreground: 210 40% 98%; --accent: 216 34% 17%; --accent-foreground: 210 40% 98%; --destructive: 0 63% 31%; --destructive-foreground: 210 40% 98%; --ring: 216 34% 17%; --radius: 0.5rem; } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; font-feature-settings: "rlig" 1, "calt" 1; } } [V0_FILE]typescriptreact:file="components/modal.tsx" isFixed="true" isQuickEdit="true" "use client" import { useState, type ReactNode } from "react" import { X } from "lucide-react" interface ModalProps { trigger: ReactNode title: string description: string } export function Modal({ trigger, title, description }: ModalProps) { const [isOpen, setIsOpen] = useState(false) return ( <>

setIsOpen(true)}>{trigger}

{isOpen && (

{title}

{description}

Amount

)} ) } [V0_FILE]typescriptreact:file="components/accounts-overview.tsx" "use client" import { useState } from "react" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Wallet, Plus, Send, CreditCard, MoreHorizontal } from "lucide-react" import { AddMoneyModal } from "./add-money-modal" import { SendMoneyModal } from "./send-money-modal" import { RequestMoneyModal } from "./request-money-modal" const initialAccounts = [ { name: "Checking", balance: 7500 }, { name: "Savings", balance: 560000 }, { name: "Investment", balance: 5879000 }, ] export function AccountsOverview() { const [accounts, setAccounts] = useState(initialAccounts) const [isAddMoneyModalOpen, setIsAddMoneyModalOpen] = useState(false) const [isSendMoneyModalOpen, setIsSendMoneyModalOpen] = useState(false) const [isRequestMoneyModalOpen, setIsRequestMoneyModalOpen] = useState(false) const totalBalance = accounts.reduce((sum, account) => sum + account.balance, 0) const handleAddMoney = (amount) => { setAccounts( accounts.map((account) => account.name === "Checking" ? { ...account, balance: account.balance + amount } : account, ), ) } const handleSendMoney = (amount, fromAccount) => { setAccounts( accounts.map((account) => account.name === fromAccount ? { ...account, balance: account.balance - amount } : account, ), ) } const handleRequestMoney = (amount, contact) => { console.log(`Requested $${amount} from ${contact.name}`) } return ( Accounts Overview

${totalBalance.toLocaleString()}

Total balance across all accounts

{accounts.map((account) => (

{account.name} ${account.balance.toLocaleString()}

))}

setIsAddMoneyModalOpen(false)} onAddMoney={handleAddMoney} /> setIsSendMoneyModalOpen(false)} onSendMoney={handleSendMoney} accounts={accounts} /> setIsRequestMoneyModalOpen(false)} onRequestMoney={handleRequestMoney} /> ) } [V0_FILE]typescriptreact:file="components/budget-tracker.tsx" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Progress } from "@/components/ui/progress" const budgetCategories = [ { name: "Housing", spent: 2000, budget: 2500 }, { name: "Transportation", spent: 450, budget: 500 }, { name: "Food", spent: 800, budget: 1000 }, { name: "Utilities", spent: 300, budget: 350 }, { name: "Entertainment", spent: 250, budget: 300 }, ] export function BudgetTracker() { const totalBudget = budgetCategories.reduce((sum, category) => sum + category.budget, 0) const totalSpent = budgetCategories.reduce((sum, category) => sum + category.spent, 0) const overallPercentage = (totalSpent / totalBudget) * 100 return ( Budget Overview

Total Spent ${totalSpent.toLocaleString()} / ${totalBudget.toLocaleString()}

{overallPercentage.toFixed(1)}% of budget used

{budgetCategories.map((category) => { const percentage = (category.spent / category.budget) * 100 return (

{category.name} {percentage.toFixed(0)}%

) })}

) } [V0_FILE]typescriptreact:file="components/savings-goals.tsx" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Progress } from "@/components/ui/progress" import { Button } from "@/components/ui/button" import { PlusCircle } from "lucide-react" const savingsGoals = [ { name: "Emergency Fund", current: 10000, target: 25000 }, { name: "Vacation", current: 3000, target: 5000 }, { name: "New Car", current: 15000, target: 35000 }, ] export function SavingsGoals() { return ( Savings Goals

{savingsGoals.map((goal) => { const percentage = (goal.current / goal.target) * 100 return (

{goal.name} ${goal.current.toLocaleString()} / ${goal.target.toLocaleString()}

{percentage.toFixed(1)}% complete

) })}

) } [V0_FILE]typescriptreact:file="components/quick-bill-pay.tsx" "use client" import { useState } from "react" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { PaymentModal } from "./payment-modal" const initialBills = [ { id: 1, name: "Electricity Bill", amount: 85, dueDate: "2023-07-15" }, { id: 2, name: "Internet Service", amount: 60, dueDate: "2023-07-18" }, { id: 3, name: "Credit Card Payment", amount: 500, dueDate: "2023-07-25" }, { id: 4, name: "Water Bill", amount: 45, dueDate: "2023-07-30" }, ] export function QuickBillPay() { const [bills, setBills] = useState(initialBills) const [selectedBill, setSelectedBill] = useState(null) const handlePaymentSuccess = (paidBillId) => { setBills(bills.filter((bill) => bill.id !== paidBillId)) setSelectedBill(null) } return ( Quick Bill Pay {bills.length > 0 ? (

{bills.map((bill) => (

{bill.name}

Due: {bill.dueDate}

${bill.amount}

))}

) : (

No pending bills

)} {selectedBill && ( setSelectedBill(null)} onPaymentSuccess={() => handlePaymentSuccess(selectedBill.id)} /> )} ) } [V0_FILE]typescriptreact:file="components/payment-modal.tsx" "use client" import { useState } from "react" import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog" import { Button } from "@/components/ui/button" import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group" import { Label } from "@/components/ui/label" import { Input } from "@/components/ui/input" import { CheckCircle2 } from "lucide-react" const steps = ["Payment Option", "Card Details", "OTP Verification", "Confirmation"] export function PaymentModal({ bill, isOpen, onClose, onPaymentSuccess }) { const [currentStep, setCurrentStep] = useState(0) const [paymentOption, setPaymentOption] = useState("full") const [cardDetails, setCardDetails] = useState({ number: "", expiry: "", cvv: "" }) const [otp, setOtp] = useState("") const handleContinue = () => { if (currentStep < steps.length - 1) { setCurrentStep(currentStep + 1) } else { onPaymentSuccess() onClose() } } const renderStepContent = () => { switch (currentStep) { case 0: return (

Pay in full (${bill.amount})

Pay in 4 (${(bill.amount / 4).toFixed(2)} x 4)

) case 1: return (

Card Number setCardDetails({ ...cardDetails, number: e.target.value })} />

Expiry Date setCardDetails({ ...cardDetails, expiry: e.target.value })} />

CVV setCardDetails({ ...cardDetails, cvv: e.target.value })} />

) case 2: return (

Enter the OTP sent to your registered mobile number

setOtp(e.target.value)} />

) case 3: return (

Payment Successful

Your payment of ${bill.amount} for {bill.name} has been processed successfully.

) } } return ( ) } [V0_FILE]typescriptreact:file="app/page.tsx" import { QuickAccessCards } from "@/components/quick-access-cards" import { PurchaseVolumeCharts } from "@/components/purchase-volume-charts" import { SupplierEvaluations } from "@/components/supplier-evaluations" import { MyRFQs } from "@/components/my-rfqs" export default function Dashboard() { return (

Dashboard

) } [V0_FILE]typescriptreact:file="components/add-money-modal.tsx" "use client" import { useState } from "react" import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { CheckCircle2 } from "lucide-react" const steps = ["Amount", "Card Details", "OTP Verification", "Confirmation"] export function AddMoneyModal({ isOpen, onClose, onAddMoney }) { const [currentStep, setCurrentStep] = useState(0) const [amount, setAmount] = useState("") const [cardDetails, setCardDetails] = useState({ number: "", expiry: "", cvv: "" }) const [otp, setOtp] = useState("") const handleContinue = () => { if (currentStep < steps.length - 1) { setCurrentStep(currentStep + 1) } else { onAddMoney(Number.parseFloat(amount)) onClose() } } const renderStepContent = () => { switch (currentStep) { case 0: return (

Amount to Add setAmount(e.target.value)} />

) case 1: return (

Card Number setCardDetails({ ...cardDetails, number: e.target.value })} />

Expiry Date setCardDetails({ ...cardDetails, expiry: e.target.value })} />

CVV setCardDetails({ ...cardDetails, cvv: e.target.value })} />

) case 2: return (

Enter the OTP sent to your registered mobile number

setOtp(e.target.value)} />

) case 3: return (

Money Added Successfully

${amount} has been added to your Checking account.

) } } return ( ) } [V0_FILE]typescriptreact:file="components/send-money-modal.tsx" "use client" import { useState } from "react" import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { CheckCircle2 } from "lucide-react" const steps = ["Amount and Account", "Card Details", "OTP Verification", "Confirmation"] export function SendMoneyModal({ isOpen, onClose, onSendMoney, accounts }) { const [currentStep, setCurrentStep] = useState(0) const [amount, setAmount] = useState("") const [selectedAccount, setSelectedAccount] = useState("") const [cardDetails, setCardDetails] = useState({ number: "", expiry: "", cvv: "" }) const [otp, setOtp] = useState("") const handleContinue = () => { if (currentStep < steps.length - 1) { setCurrentStep(currentStep + 1) } else { onSendMoney(Number.parseFloat(amount), selectedAccount) onClose() } } const renderStepContent = () => { switch (currentStep) { case 0: return (

Amount to Send setAmount(e.target.value)} />

From Account

) case 1: return (

Card Number setCardDetails({ ...cardDetails, number: e.target.value })} />

Expiry Date setCardDetails({ ...cardDetails, expiry: e.target.value })} />

CVV setCardDetails({ ...cardDetails, cvv: e.target.value })} />

) case 2: return (

Enter the OTP sent to your registered mobile number

setOtp(e.target.value)} />

) case 3: return (

Money Sent Successfully

${amount} has been sent from your {selectedAccount} account.

) } } return ( ) } [V0_FILE]typescriptreact:file="components/top-up-modal.tsx" "use client" import { useState } from "react" import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { CheckCircle2 } from "lucide-react" const steps = ["Amount", "Card Details", "OTP Verification", "Confirmation"] export function TopUpModal({ isOpen, onClose, onTopUp }) { const [currentStep, setCurrentStep] = useState(0) const [amount, setAmount] = useState("") const [cardDetails, setCardDetails] = useState({ number: "", expiry: "", cvv: "" }) const [otp, setOtp] = useState("") const handleContinue = () => { if (currentStep < steps.length - 1) { setCurrentStep(currentStep + 1) } else { onTopUp(Number.parseFloat(amount)) onClose() } } const renderStepContent = () => { switch (currentStep) { case 0: return (

Top-up Amount setAmount(e.target.value)} />

) case 1: return (

Card Number setCardDetails({ ...cardDetails, number: e.target.value })} />

Expiry Date setCardDetails({ ...cardDetails, expiry: e.target.value })} />

CVV setCardDetails({ ...cardDetails, cvv: e.target.value })} />

) case 2: return (

Enter the OTP sent to your registered mobile number

setOtp(e.target.value)} />

) case 3: return (

Top-up Successful

${amount} has been added to your account.

) } } return ( ) } [V0_FILE]typescriptreact:file="components/request-money-modal.tsx" "use client" import { useState } from "react" import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { CheckCircle2 } from "lucide-react" const steps = ["Select Contact", "Enter Amount", "OTP Verification", "Confirmation"] const contacts = [ { id: "1", name: "John Doe", phoneNumber: "+1 234 567 8901" }, { id: "2", name: "Jane Smith", phoneNumber: "+1 987 654 3210" }, { id: "3", name: "Alice Johnson", phoneNumber: "+1 555 123 4567" }, ] export function RequestMoneyModal({ isOpen, onClose, onRequestMoney }) { const [currentStep, setCurrentStep] = useState(0) const [selectedContact, setSelectedContact] = useState(null) const [amount, setAmount] = useState("") const [otp, setOtp] = useState("") const handleContinue = () => { if (currentStep < steps.length - 1) { setCurrentStep(currentStep + 1) } else { onRequestMoney(Number.parseFloat(amount), selectedContact) onClose() } } const renderStepContent = () => { switch (currentStep) { case 0: return (

Select Contact {selectedContact && (

Contact Details:

Name: {selectedContact.name}

ID: {selectedContact.id}

Phone: {selectedContact.phoneNumber}

)}

) case 1: return (

Amount to Request setAmount(e.target.value)} />

) case 2: return (

Enter the OTP sent to your registered mobile number

setOtp(e.target.value)} />

) case 3: return (

Money Request Sent

${amount} has been requested from {selectedContact.name}.

) } } return ( ) } [V0_FILE]typescriptreact:file="components/notifications.tsx" "use client" import { useState } from "react" import { Bell, X, Info, AlertTriangle, CreditCard, TrendingUp, Gift } from "lucide-react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { ScrollArea } from "@/components/ui/scroll-area" const notifications = [ { id: 1, title: "New Feature", message: "Check out our new budget tracking tool!", date: "2023-07-15", icon: Info, color: "text-blue-500", }, { id: 2, title: "Account Alert", message: "Unusual activity detected on your account.", date: "2023-07-14", icon: AlertTriangle, color: "text-yellow-500", }, { id: 3, title: "Payment Due", message: "Your credit card payment is due in 3 days.", date: "2023-07-13", icon: CreditCard, color: "text-red-500", }, { id: 4, title: "Investment Update", message: "Your investment portfolio has grown by 5% this month.", date: "2023-07-12", icon: TrendingUp, color: "text-green-500", }, { id: 5, title: "New Offer", message: "You're eligible for a new savings account with higher interest!", date: "2023-07-11", icon: Gift, color: "text-purple-500", }, ] export function Notifications() { const [isOpen, setIsOpen] = useState(false) return (

{isOpen && ( Notifications {notifications.map((notification) => (

{notification.title}

{notification.message}

{notification.date}

))} )}

) } [V0_FILE]typescriptreact:file="components/profile-modal.tsx" "use client" import { useState } from "react" import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { CreditCard, Edit2, Save, Trash2 } from "lucide-react" interface ProfileModalProps { isOpen: boolean onClose: () => void } interface CardInfo { type: string number: string expiry: string } interface UserProfile { name: string email: string company: string phone: string accountNumber: string bankName: string cards: CardInfo[] } export function ProfileModal({ isOpen, onClose }: ProfileModalProps) { const [isEditing, setIsEditing] = useState(false) const [userProfile, setUserProfile] = useState({ name: "Dollar Gill", email: "dollar@example.com", company: "Acme Inc.", phone: "+1 (555) 123-4567", accountNumber: "1234567890", bankName: "Global Bank", cards: [ { type: "Visa", number: "************1387", expiry: "12/24" }, { type: "Amex", number: "***********2468", expiry: "06/25" }, { type: "Mastercard", number: "************9876", expiry: "03/26" }, ], }) const handleInputChange = (field: keyof UserProfile, value: string) => { setUserProfile((prev) => ({ ...prev, [field]: value })) } const handleSave = () => { setIsEditing(false) // Here you would typically send the updated profile to your backend console.log("Saving profile:", userProfile) } const handleRemoveCard = (index: number) => { setUserProfile((prev) => ({ ...prev, cards: prev.cards.filter((_, i) => i !== index), })) } return ( ) } [V0_FILE]typescriptreact:file="components/business-metrics.tsx" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { TrendingUp, Users, DollarSign, ArrowRight } from "lucide-react" const metrics = [ { id: 1, title: "Revenue Growth", subtitle: "Monthly revenue target", icon: TrendingUp, status: "On Track", progress: 75, target: 100000, current: 75000, unit: "$", }, { id: 2, title: "Customer Acquisition", subtitle: "New customers this quarter", icon: Users, status: "Behind", progress: 60, target: 1000, current: 600, unit: "", }, { id: 3, title: "Average Order Value", subtitle: "Target AOV for Q3", icon: DollarSign, status: "Ahead", progress: 110, target: 150, current: 165, unit: "$", }, ] const statusColors = { "On Track": "bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200", Behind: "bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200", Ahead: "bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200", } export function BusinessMetrics() { return (

Business Metrics

{metrics.map((metric) => ( {metric.title}

{metric.subtitle}

{metric.status} {metric.current} / {metric.target} {metric.unit}

{metric.unit} {metric.target.toLocaleString()} {metric.progress}% complete

))}

) } [V0_FILE]typescriptreact:file="contexts/settings-context.tsx" isFixed="true" isQuickEdit="true" "use client" import { createContext, useContext, useEffect, useState } from "react" export interface UserSettings { avatar: string fullName: string email: string phone: string timezone: string language: string currency: string dateFormat: string fontSize: number theme: "light" | "dark" | "system" layout: "default" | "compact" | "expanded" notifications: { email: boolean push: boolean sms: boolean accountActivity: boolean newFeatures: boolean marketing: boolean frequency: "real-time" | "daily" | "weekly" quietHoursStart: string quietHoursEnd: string } privacy: { analyticsSharing: boolean personalizedAds: boolean visibility: "public" | "private" dataRetention: "6-months" | "1-year" | "2-years" | "indefinite" } } const defaultSettings: UserSettings = { avatar: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/38184074.jpg-M4vCjTSSWVw5RwWvvmrxXBcNVU8MBU.jpeg", fullName: "Dollar Singh", email: "dollar.singh@example.com", phone: "+1 (555) 123-4567", timezone: "utc-8", language: "en", currency: "usd", dateFormat: "mm-dd-yyyy", fontSize: 16, theme: "system", layout: "default", notifications: { email: true, push: true, sms: false, accountActivity: true, newFeatures: true, marketing: false, frequency: "real-time", quietHoursStart: "22:00", quietHoursEnd: "07:00", }, privacy: { analyticsSharing: true, personalizedAds: false, visibility: "public", dataRetention: "1-year", }, } interface SettingsContextType { settings: UserSettings updateSettings: (newSettings: Partial) => void updateNotificationSettings: (settings: Partial) => void updatePrivacySettings: (settings: Partial) => void } const SettingsContext = createContext(undefined) export function SettingsProvider({ children }: { children: React.ReactNode }) { const [settings, setSettings] = useState(() => { // Try to load settings from localStorage during initialization if (typeof window !== "undefined") { const savedSettings = localStorage.getItem("userSettings") if (savedSettings) { return JSON.parse(savedSettings) } } return defaultSettings }) // Save settings to localStorage whenever they change useEffect(() => { localStorage.setItem("userSettings", JSON.stringify(settings)) }, [settings]) const updateSettings = (newSettings: Partial) => { setSettings((prev) => ({ ...prev, ...newSettings })) } const updateNotificationSettings = (notificationSettings: Partial) => { setSettings((prev) => ({ ...prev, notifications: { ...prev.notifications, ...notificationSettings }, })) } const updatePrivacySettings = (privacySettings: Partial) => { setSettings((prev) => ({ ...prev, privacy: { ...prev.privacy, ...privacySettings }, })) } return ( {children} ) } export function useSettings() { const context = useContext(SettingsContext) if (context === undefined) { throw new Error("useSettings must be used within a SettingsProvider") } return context } [V0_FILE]typescriptreact:file="components/top-nav.tsx" "use client" import { ThemeToggle } from "./theme-toggle" import { Notifications } from "./notifications" import Link from "next/link" import { usePathname } from "next/navigation" import { useSettings } from "@/contexts/settings-context" import { Search } from "lucide-react" import { Input } from "@/components/ui/input" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" import { Button } from "@/components/ui/button" import React from "react" export function TopNav() { const pathname = usePathname() const pathSegments = pathname.split("/").filter(Boolean) const { settings } = useSettings() return (

{settings.fullName}

{settings.email}

Profile Settings Log out

) } [V0_FILE]typescriptreact:file="app/settings/page.tsx" isFixed="true" isQuickEdit="true" "use client" import { useSettings } from "@/contexts/settings-context" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Card, CardContent, CardDescription, CardHeader, CardTitle, CardFooter } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Switch } from "@/components/ui/switch" import { Button } from "@/components/ui/button" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Slider } from "@/components/ui/slider" import { Checkbox } from "@/components/ui/checkbox" import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" import { Laptop, Smartphone, Tablet } from "lucide-react" import { useState } from "react" import { toast } from "sonner" const defaultAvatars = [ "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/9439775.jpg-4JVJWOjPksd3DtnBYJXoWHA5lc1DU9.jpeg", "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/375238645_11475210.jpg-lU8bOe6TLt5Rv51hgjg8NT8PsDBmvN.jpeg", "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/375238208_11475222.jpg-poEIzVHAGiIfMFQ7EiF8PUG1u0Zkzz.jpeg", "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/dd.jpg-4MCwPC2Bec6Ume26Yo1kao3CnONxDg.jpeg", "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/9334178.jpg-Y74tW6XFO68g7N36SE5MSNDNVKLQ08.jpeg", "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/5295.jpg-fLw0wGGZp8wuTzU5dnyfjZDwAHN98a.jpeg", "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/9720029.jpg-Yf9h2a3kT7rYyCb648iLIeHThq5wEy.jpeg", "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/27470341_7294795.jpg-XE0zf7R8tk4rfA1vm4fAHeZ1QoVEOo.jpeg", "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/799.jpg-0tEi4Xvg5YsFoGoQfQc698q4Dygl1S.jpeg", "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/9334228.jpg-eOsHCkvVrVAwcPHKYSs5sQwVKsqWpC.jpeg", ] export default function SettingsPage() { const { settings, updateSettings, updateNotificationSettings, updatePrivacySettings } = useSettings() const [selectedAvatar, setSelectedAvatar] = useState(settings.avatar) const handleSaveAccount = () => { updateSettings({ avatar: selectedAvatar, fullName: settings.fullName, email: settings.email, phone: settings.phone, timezone: settings.timezone, }) toast.success("Account settings saved successfully") } const handleSaveNotifications = () => { updateNotificationSettings(settings.notifications) toast.success("Notification settings saved successfully") } const handleSavePrivacy = () => { updatePrivacySettings(settings.privacy) toast.success("Privacy settings saved successfully") } return (

Settings

Account Security Preferences Notifications Privacy Account Settings Manage your account information

Current Avatar

{settings.fullName .split(" ") .map((n) => n[0]) .join("")}

Choose a new avatar

{defaultAvatars.map((avatar, index) => ( setSelectedAvatar(avatar)} > {index + 1} ))}

Or upload a custom avatar

Full Name updateSettings({ fullName: e.target.value })} />

Email updateSettings({ email: e.target.value })} />

Phone Number updateSettings({ phone: e.target.value })} />

Timezone

Security Settings Manage your account's security settings

Current Password

New Password

Confirm New Password

Enable Two-Factor Authentication

Login History Recent login activities on your account {[ { date: "2023-07-20", time: "14:30 UTC", ip: "192.168.1.1", location: "New York, USA" }, { date: "2023-07-19", time: "09:15 UTC", ip: "10.0.0.1", location: "London, UK" }, { date: "2023-07-18", time: "22:45 UTC", ip: "172.16.0.1", location: "Tokyo, Japan" }, ].map((login, index) => (

{login.date} {login.time} {login.ip} {login.location}

))} Active Sessions Currently active sessions on your account {[ { device: "Laptop", browser: "Chrome", os: "Windows 10", icon: Laptop }, { device: "Smartphone", browser: "Safari", os: "iOS 15", icon: Smartphone }, { device: "Tablet", browser: "Firefox", os: "Android 12", icon: Tablet }, ].map((session, index) => (

{session.device} {session.browser} {session.os}

))}

Preferences Customize your dashboard experience

Language

Currency

Date Format

Font Size

Theme

Light

Dark

System

Dashboard Layout

Default

Compact

Expanded

Notification Settings Manage how you receive notifications

Notification Channels

updateNotificationSettings({ ...settings.notifications, email: e.target.checked }) } /> Email Notifications

updateNotificationSettings({ ...settings.notifications, push: e.target.checked }) } /> Push Notifications

updateNotificationSettings({ ...settings.notifications, sms: e.target.checked })} /> SMS Notifications

Notification Types

updateNotificationSettings({ ...settings.notifications, accountActivity: e.target.checked }) } /> Account Activity

updateNotificationSettings({ ...settings.notifications, newFeatures: e.target.checked }) } /> New Features and Updates

updateNotificationSettings({ ...settings.notifications, marketing: e.target.checked }) } /> Marketing and Promotions

Notification Frequency

Quiet Hours

Privacy Settings Manage your privacy and data settings

Data Sharing

Share analytics data

Allow personalized ads updatePrivacySettings({ ...settings.privacy, personalizedAds: e.target.checked }) } />

Account Visibility updatePrivacySettings({ ...settings.privacy, visibility: value })} >

Public

Private

Data Retention Third-Party Integrations

Connected: Google Analytics, Facebook Pixel

) } [V0_FILE]typescriptreact:file="components/analytics/top-products.tsx" import { CheckCircle2 } from "lucide-react" const topProducts = [ { name: "Savings Account", revenue: "$1,200,000", growth: "+12%" }, { name: "Credit Card", revenue: "$980,000", growth: "+8%" }, { name: "Personal Loan", revenue: "$850,000", growth: "+15%" }, { name: "Mortgage", revenue: "$2,300,000", growth: "+5%" }, { name: "Investment Fund", revenue: "$1,800,000", growth: "+20%" }, ] export function TopProducts() { return (

{topProducts.map((product) => (

{product.name}

{product.revenue}

{product.growth}

))}

) } [V0_FILE]typescriptreact:file="components/analytics/recent-transactions.tsx" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" import { Card, CardContent } from "@/components/ui/card" const recentTransactions = [ { id: "1", name: "Alice Johnson", email: "alice@example.com", amount: "+$350.00", status: "success", date: "2023-07-20", avatar: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/375238645_11475210.jpg-lU8bOe6TLt5Rv51hgjg8NT8PsDBmvN.jpeg", }, { id: "2", name: "Bob Smith", email: "bob@example.com", amount: "-$120.50", status: "pending", date: "2023-07-19", avatar: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/375238208_11475222.jpg-poEIzVHAGiIfMFQ7EiF8PUG1u0Zkzz.jpeg", }, { id: "3", name: "Charlie Brown", email: "charlie@example.com", amount: "+$1,000.00", status: "success", date: "2023-07-18", avatar: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/dd.jpg-4MCwPC2Bec6Ume26Yo1kao3CnONxDg.jpeg", }, { id: "4", name: "Diana Martinez", email: "diana@example.com", amount: "-$50.75", status: "failed", date: "2023-07-17", avatar: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/9334178.jpg-Y74tW6XFO68g7N36SE5MSNDNVKLQ08.jpeg", }, { id: "5", name: "Ethan Williams", email: "ethan@example.com", amount: "+$720.00", status: "success", date: "2023-07-16", avatar: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/5295.jpg-fLw0wGGZp8wuTzU5dnyfjZDwAHN98a.jpeg", }, ] export function RecentTransactions() { return (

{recentTransactions.map((transaction) => ( {transaction.name.charAt(0)}

{transaction.name}

{transaction.email}

{transaction.amount}

{transaction.date}

))}

) } [V0_FILE]typescriptreact:file="components/analytics/account-growth.tsx" "use client" import { Bar, BarChart, ResponsiveContainer, XAxis, YAxis, Tooltip } from "recharts" import { Card, CardContent } from "@/components/ui/card" import { useTheme } from "next-themes" const data = [ { month: "Jan", newAccounts: 100, totalAccounts: 1000 }, { month: "Feb", newAccounts: 120, totalAccounts: 1120 }, { month: "Mar", newAccounts: 150, totalAccounts: 1270 }, { month: "Apr", newAccounts: 180, totalAccounts: 1450 }, { month: "May", newAccounts: 200, totalAccounts: 1650 }, { month: "Jun", newAccounts: 220, totalAccounts: 1870 }, ] export function AccountGrowth() { const { theme } = useTheme() const CustomTooltip = ({ active, payload, label }) => { if (active && payload && payload.length) { return (

{label}

New Accounts: {payload[0].value}

Total Accounts: {payload[1].value}

) } return null } return ( } /> ) } [V0_FILE]typescriptreact:file="components/analytics/metrics-carousel.tsx" "use client" import { Card, CardContent } from "@/components/ui/card" import { DollarSign, Users, CreditCard, TrendingUp, Briefcase, ShieldCheck } from "lucide-react" import { useState, useEffect, useRef } from "react" import { Button } from "@/components/ui/button" const metrics = [ { title: "Total Revenue", value: "$1,234,567", icon: DollarSign, change: "+12.3%", description: "Overall earnings this quarter", }, { title: "Active Users", value: "45,678", icon: Users, change: "+5.7%", description: "Users engaged in the last 30 days", }, { title: "New Accounts", value: "1,234", icon: CreditCard, change: "+3.2%", description: "Fresh sign-ups this month", }, { title: "Growth Rate", value: "8.9%", icon: TrendingUp, change: "+1.5%", description: "Year-over-year expansion" }, { title: "Corporate Clients", value: "89", icon: Briefcase, change: "+10.1%", description: "Business accounts acquired", }, { title: "Security Index", value: "98.7%", icon: ShieldCheck, change: "+0.5%", description: "Overall system integrity score", }, ] export function MetricsCarousel() { const [currentIndex, setCurrentIndex] = useState(0) const [isAnimating, setIsAnimating] = useState(false) const carouselRef = useRef(null) const cardWidth = 100 / 3.5 // Show 3.5 cards const nextSlide = () => { if (!isAnimating) { setIsAnimating(true) setCurrentIndex((prevIndex) => (prevIndex + 1) % metrics.length) } } const prevSlide = () => { if (!isAnimating) { setIsAnimating(true) setCurrentIndex((prevIndex) => (prevIndex - 1 + metrics.length) % metrics.length) } } useEffect(() => { if (carouselRef.current) { const transitionEndHandler = () => { setIsAnimating(false) if (currentIndex === metrics.length - 1) { carouselRef.current!.style.transition = "none" setCurrentIndex(0) setTimeout(() => { carouselRef.current!.style.transition = "transform 0.3s ease-in-out" }, 50) } else if (currentIndex === 0) { carouselRef.current!.style.transition = "none" setCurrentIndex(metrics.length - 1) setTimeout(() => { carouselRef.current!.style.transition = "transform 0.3s ease-in-out" }, 50) } } carouselRef.current.addEventListener("transitionend", transitionEndHandler) return () => { carouselRef.current?.removeEventListener("transitionend", transitionEndHandler) } } }, [currentIndex]) const renderMetrics = () => { const items = [...metrics, ...metrics, ...metrics] return items.map((metric, index) => (

{metric.change}

{metric.title}

{metric.value}

{metric.description}

)) } return (

{renderMetrics()}

) } [V0_FILE]typescriptreact:file="components/analytics/user-activity.tsx" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" import { Card, CardContent } from "@/components/ui/card" const userActivities = [ { id: "1", user: "Fiona Garcia", action: "Logged in", time: "2 minutes ago", avatar: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/9720029.jpg-Yf9h2a3kT7rYyCb648iLIeHThq5wEy.jpeg", }, { id: "2", user: "George Lee", action: "Updated profile", time: "10 minutes ago", avatar: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/27470341_7294795.jpg-XE0zf7R8tk4rfA1vm4fAHeZ1QoVEOo.jpeg", }, { id: "3", user: "Hannah Kim", action: "Made a transfer", time: "15 minutes ago", avatar: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/799.jpg-0tEi4Xvg5YsFoGoQfQc698q4Dygl1S.jpeg", }, { id: "4", user: "Ian Foster", action: "Opened new account", time: "30 minutes ago", avatar: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/9334228.jpg-eOsHCkvVrVAwcPHKYSs5sQwVKsqWpC.jpeg", }, ] export function UserActivity() { return (

{userActivities.map((activity) => ( {activity.user.charAt(0)}

{activity.user}

{activity.action}

{activity.time}

))}

) } [V0_FILE]typescriptreact:file="components/date-range-picker.tsx" "use client" import * as React from "react" import { CalendarIcon } from "@radix-ui/react-icons" import { addDays, format } from "date-fns" import type { DateRange } from "react-day-picker" import { cn } from "@/lib/utils" import { Button } from "@/components/ui/button" import { Calendar } from "@/components/ui/calendar" import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover" export function DateRangePicker({ className }: React.HTMLAttributes) { const [date, setDate] = React.useState({ from: new Date(2023, 0, 20), to: addDays(new Date(2023, 0, 20), 20), }) return (

) } [V0_FILE]typescriptreact:file="components/analytics/overview-cards.tsx" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { DollarSign, Users, CreditCard, TrendingUp } from "lucide-react" const cards = [ { title: "Total Revenue", icon: DollarSign, amount: "$45,231.89", description: "+20.1% from last month", trend: "up", }, { title: "New Customers", icon: Users, amount: "2,350", description: "+180.1% from last month", trend: "up", }, { title: "Active Accounts", icon: CreditCard, amount: "12,234", description: "+19% from last month", trend: "up", }, { title: "Growth Rate", icon: TrendingUp, amount: "18.6%", description: "+5.4% from last month", trend: "up", }, ] export function OverviewCards() { return ( <> {cards.map((card) => ( {card.title}

{card.amount}

{card.description}

{card.trend === "up" ? ( ) : ( )} {card.description.split(" ")[0]}

))} ) } [V0_FILE]typescriptreact:file="components/analytics/revenue-chart.tsx" "use client" import { Line, LineChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts" import { Card, CardContent } from "@/components/ui/card" import { useTheme } from "next-themes" const data = [ { month: "Jan", revenue: 2000 }, { month: "Feb", revenue: 2200 }, { month: "Mar", revenue: 2700 }, { month: "Apr", revenue: 2400 }, { month: "May", revenue: 2800 }, { month: "Jun", revenue: 3200 }, { month: "Jul", revenue: 3100 }, { month: "Aug", revenue: 3400 }, { month: "Sep", revenue: 3700 }, { month: "Oct", revenue: 3500 }, { month: "Nov", revenue: 3800 }, { month: "Dec", revenue: 4200 }, ] export function RevenueChart() { const { theme } = useTheme() const CustomTooltip = ({ active, payload, label }) => { if (active && payload && payload.length) { return (

{label}

Revenue: ${payload[0].value.toLocaleString()}

) } return null } return ( `$${value}`} /> } /> ) } [V0_FILE]typescriptreact:file="app/analytics/page.tsx" "use client" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { DateRangePicker } from "@/components/date-range-picker" import { OverviewTab } from "@/components/analytics/overview-tab" import { AnalyticsTab } from "@/components/analytics/analytics-tab" import { ReportsTab } from "@/components/analytics/reports-tab" import { NotificationsTab } from "@/components/analytics/notifications-tab" import { Button } from "@/components/ui/button" import { Download } from "lucide-react" export default function AnalyticsPage() { const handleExportData = () => { // Implement export functionality here console.log("Exporting data...") } return (

Analytics

Overview Analytics Reports Notifications

) } [V0_FILE]typescriptreact:file="components/analytics/overview-tab.tsx" "use client" import { useState } from "react" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { OverviewCards } from "@/components/analytics/overview-cards" import { RevenueChart } from "@/components/analytics/revenue-chart" import { RecentTransactions } from "@/components/analytics/recent-transactions" import { AccountGrowth } from "@/components/analytics/account-growth" import { TopProducts } from "@/components/analytics/top-products" import { UserActivity } from "@/components/analytics/user-activity" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" export function OverviewTab() { const [comparisonPeriod, setComparisonPeriod] = useState("previous_month") return ( <>

Dashboard Overview

Compare to:

Revenue Recent Transactions

Account Growth Top Products

User Activity

) } [V0_FILE]typescriptreact:file="components/analytics/analytics-tab.tsx" "use client" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Bar, BarChart, Line, LineChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts" import { useTheme } from "next-themes" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { useState } from "react" const customerSegmentationData = [ { segment: "High Value", count: 1200 }, { segment: "Medium Value", count: 5300 }, { segment: "Low Value", count: 8500 }, { segment: "At Risk", count: 1700 }, { segment: "Lost", count: 800 }, ] const retentionRateData = [ { month: "Jan", rate: 95 }, { month: "Feb", rate: 93 }, { month: "Mar", rate: 94 }, { month: "Apr", rate: 95 }, { month: "May", rate: 97 }, { month: "Jun", rate: 98 }, ] const channelPerformanceData = [ { channel: "Direct", acquisitions: 1200, revenue: 50000 }, { channel: "Organic Search", acquisitions: 2500, revenue: 75000 }, { channel: "Paid Search", acquisitions: 1800, revenue: 60000 }, { channel: "Social Media", acquisitions: 1500, revenue: 45000 }, { channel: "Email", acquisitions: 900, revenue: 30000 }, ] export function AnalyticsTab() { const { theme } = useTheme() const [timeFrame, setTimeFrame] = useState("last_30_days") return (

Detailed Analytics

Customer Segmentation Customer Retention Rate

Channel Performance Key Metrics

Customer Lifetime Value

$1,250

Net Promoter Score

Customer Acquisition Cost

$75

Average Order Value

$120

) } [V0_FILE]typescriptreact:file="components/analytics/reports-tab.tsx" isFixed="true" isQuickEdit="true" "use client" import { useState } from "react" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" import { Download, Printer } from "lucide-react" const reportTypes = [ "Financial Summary", "Customer Acquisition", "Product Performance", "Risk Assessment", "Marketing Campaign Analysis", "Operational Efficiency", ] const dummyReportData = { "Financial Summary": [ { id: 1, metric: "Total Revenue", value: "$1,234,567" }, { id: 2, metric: "Net Profit", value: "$345,678" }, { id: 3, metric: "Operating Expenses", value: "$567,890" }, { id: 4, metric: "Gross Margin", value: "28%" }, { id: 5, metric: "Return on Investment", value: "15%" }, ], "Customer Acquisition": [ { id: 1, metric: "New Customers", value: "1,234" }, { id: 2, metric: "Customer Acquisition Cost", value: "$50" }, { id: 3, metric: "Conversion Rate", value: "3.5%" }, { id: 4, metric: "Customer Lifetime Value", value: "$1,200" }, { id: 5, metric: "Churn Rate", value: "2.3%" }, ], // Add more report types here } export function ReportsTab() { const [selectedReport, setSelectedReport] = useState(reportTypes[0]) const handleGenerateReport = () => { console.log(`Generating ${selectedReport} report...`) } const handleDownloadReport = () => { console.log(`Downloading ${selectedReport} report...`) } const handlePrintReport = () => { console.log(`Printing ${selectedReport} report...`) } return (

Generate Report {selectedReport} Report Metric Value {dummyReportData[selectedReport]?.map((row) => ( {row.metric} {row.value} ))}

) } [V0_FILE]typescriptreact:file="components/analytics/notifications-tab.tsx" "use client" import { useState } from "react" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Switch } from "@/components/ui/switch" import { Bell, AlertTriangle, TrendingUp, TrendingDown, DollarSign, Users } from "lucide-react" const notificationTypes = [ { id: "account", label: "Account Activity", icon: Bell }, { id: "security", label: "Security Alerts", icon: AlertTriangle }, { id: "performance", label: "Performance Updates", icon: TrendingUp }, { id: "market", label: "Market Trends", icon: TrendingDown }, { id: "financial", label: "Financial Reports", icon: DollarSign }, { id: "user", label: "User Behavior", icon: Users }, ] export function NotificationsTab() { const [notifications, setNotifications] = useState({ account: true, security: true, performance: false, market: false, financial: true, user: false, }) const toggleNotification = (id) => { setNotifications((prev) => ({ ...prev, [id]: !prev[id] })) } return (

Notification Preferences {notificationTypes.map((type) => (

{type.label}

toggleNotification(type.id)} />

))} Recent Notifications

Unusual account activity detected

2 hours ago

Your portfolio has grown by 5% this week

1 day ago

New feature: Advanced analytics now available

3 days ago

Monthly financial report is ready for review

5 days ago

) } [V0_FILE]typescriptreact:file="components/quick-access-cards.tsx" import { Card, CardContent } from "@/components/ui/card" import { HelpCircle, Building2, Users, ClipboardList, ExternalLink } from "lucide-react" const quickAccessItems = [ { title: "Zum Helpdesk", icon: HelpCircle, href: "/helpdesk", color: "bg-blue-50 text-blue-600 dark:bg-blue-950 dark:text-blue-400", }, { title: "Alle Lieferanten", icon: Building2, href: "/lieferantendaten/lieferanten", color: "bg-green-50 text-green-600 dark:bg-green-950 dark:text-green-400", }, { title: "Alle Kontakte", icon: Users, href: "/lieferantendaten/kontakte", color: "bg-purple-50 text-purple-600 dark:bg-purple-950 dark:text-purple-400", }, { title: "Alle Aufgaben", icon: ClipboardList, href: "/aufgaben", color: "bg-yellow-50 text-yellow-600 dark:bg-yellow-950 dark:text-yellow-400", }, ] export function QuickAccessCards() { return (

{quickAccessItems.map((item) => (

{item.title}

))}

) } [V0_FILE]typescriptreact:file="components/supplier-evaluations.tsx" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { Avatar, AvatarFallback } from "@/components/ui/avatar" import { ExternalLink, Plus } from "lucide-react" import { Button } from "@/components/ui/button" const evaluations = [ { title: "Performance Bewertung", company: "Becker OHG", status: "active", avatar: "BO", }, { title: "Performance Bewertung", company: "Wagner Metalle UG", status: "pending", avatar: "WM", }, { title: "ESG Risikovorklassifizierung - Onboarding", company: "Hans Mustermann GmbH", status: "active", avatar: "HM", }, { title: "ESG Risikoanalyse - Eigener Geschäftsbereich", company: "Krause GmbH", status: "active", avatar: "KG", }, { title: "ESG Risikoanalyse - Lieferant", company: "Zukunft Konstruktion Einzelunternehmen", status: "active", avatar: "ZK", }, { title: "ESG Risikoanalyse - Mitigationsfaktoren", company: "Krause Metalltechnik GmbH & Co. KG", status: "active", avatar: "KM", }, ] export function SupplierEvaluations() { return (

Meine Bewertungen Offen 51

{evaluations.map((evaluation, index) => (

{evaluation.avatar}

{evaluation.title}

{evaluation.company}

{evaluation.status === "active" ? "✓" : "○"}

))} ) } [V0_FILE]typescriptreact:file="components/my-rfqs.tsx" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { ExternalLink, Plus } from "lucide-react" import { Button } from "@/components/ui/button" const rfqs = [ { title: "CBAM Request", status: "0/1", color: "bg-green-100 text-green-700", }, { title: "Preisanfrage 123", status: "0/0", color: "bg-green-100 text-green-700", }, { title: "CBAM Request", status: "0/1", color: "bg-green-100 text-green-700", }, { title: "Preisanfrage", status: "0/1", color: "bg-green-100 text-green-700", }, { title: "CBAM Request", status: "0/1", color: "bg-green-100 text-green-700", }, { title: "Preisanfrage", status: "0/0", color: "bg-green-100 text-green-700", }, ] export function MyRFQs() { return (

Meine RFQs Offen 27

{rfqs.map((rfq, index) => (

{rfq.title}

{rfq.status} ✓

))} ) } [V0_FILE]typescriptreact:file="app/lieferantendaten/lieferanten/page.tsx" import { SupplierList } from "@/components/supplier-list" import { SupplierFilters } from "@/components/supplier-filters" import { Button } from "@/components/ui/button" import { Plus } from "lucide-react" export default function SuppliersPage() { return (

Lieferanten

) } [V0_FILE]typescriptreact:file="app/lieferantendaten/kontakte/page.tsx" import { ContactList } from "@/components/contact-list" import { ContactFilters } from "@/components/contact-filters" import { Button } from "@/components/ui/button" import { Plus } from "lucide-react" export default function ContactsPage() { return (

Kontakte

) } [V0_FILE]typescriptreact:file="components/supplier-list.tsx" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { Avatar, AvatarFallback } from "@/components/ui/avatar" import { Button } from "@/components/ui/button" import { MoreHorizontal, MapPin, Star } from "lucide-react" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu" const suppliers = [ { id: 1, name: "Becker OHG", category: "Metallverarbeitung", location: "München, Deutschland", rating: 4.8, status: "Aktiv", lastOrder: "15.01.2025", avatar: "BO", }, { id: 2, name: "Wagner Metalle UG", category: "Rohstoffe", location: "Hamburg, Deutschland", rating: 4.5, status: "Aktiv", lastOrder: "12.01.2025", avatar: "WM", }, { id: 3, name: "Hans Mustermann GmbH", category: "Elektronik", location: "Berlin, Deutschland", rating: 4.2, status: "Inaktiv", lastOrder: "08.01.2025", avatar: "HM", }, { id: 4, name: "Krause GmbH", category: "Chemikalien", location: "Frankfurt, Deutschland", rating: 4.7, status: "Aktiv", lastOrder: "14.01.2025", avatar: "KG", }, { id: 5, name: "Zukunft Konstruktion", category: "Maschinen", location: "Stuttgart, Deutschland", rating: 4.9, status: "Aktiv", lastOrder: "16.01.2025", avatar: "ZK", }, ] export function SupplierList() { return (

{suppliers.map((supplier) => (

{supplier.avatar}

{supplier.name}

{supplier.category}

Details anzeigen Bearbeiten Bewertung erstellen Deaktivieren

{supplier.location}

{supplier.rating}

{supplier.status}

Letzte Bestellung: {supplier.lastOrder}

))}

) } [V0_FILE]typescriptreact:file="components/supplier-filters.tsx" import { Card, CardContent } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Search, Filter, X } from "lucide-react" export function SupplierFilters() { return (

Aktive Filter: Deutschland Aktiv

) } [V0_FILE]typescriptreact:file="components/contact-list.tsx" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { Avatar, AvatarFallback } from "@/components/ui/avatar" import { Button } from "@/components/ui/button" import { MoreHorizontal, Mail, Phone, Building2 } from "lucide-react" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu" const contacts = [ { id: 1, name: "Thomas Müller", position: "Einkaufsleiter", company: "Becker OHG", email: "t.mueller@becker-ohg.de", phone: "+49 89 123456", status: "Aktiv", avatar: "TM", }, { id: 2, name: "Sarah Wagner", position: "Vertriebsleiterin", company: "Wagner Metalle UG", email: "s.wagner@wagner-metalle.de", phone: "+49 40 789012", status: "Aktiv", avatar: "SW", }, { id: 3, name: "Hans Mustermann", position: "Geschäftsführer", company: "Hans Mustermann GmbH", email: "h.mustermann@mustermann.de", phone: "+49 30 345678", status: "Inaktiv", avatar: "HM", }, { id: 4, name: "Anna Krause", position: "Projektmanagerin", company: "Krause GmbH", email: "a.krause@krause.de", phone: "+49 69 901234", status: "Aktiv", avatar: "AK", }, ] export function ContactList() { return (

{contacts.map((contact) => (

{contact.avatar}

{contact.name}

{contact.position}

Details anzeigen Bearbeiten E-Mail senden Löschen

{contact.company}

{contact.email}

{contact.phone}

{contact.status}

))}

) } [V0_FILE]typescriptreact:file="components/contact-filters.tsx" import { Card, CardContent } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Search, Filter, X } from "lucide-react" export function ContactFilters() { return (

Aktive Filter: Aktiv

) } [V0_FILE]typescriptreact:file="app/bedarfe/page.tsx" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Plus } from "lucide-react" export default function RequirementsPage() { return (

Bedarfe

Aktuelle Bedarfe

Hier werden Ihre aktuellen Beschaffungsbedarfe angezeigt.

) } [V0_FILE]typescriptreact:file="app/tools/rfqs/page.tsx" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Plus } from "lucide-react" export default function RFQsPage() { return (

RFQs

Request for Quotations

Verwalten Sie Ihre Angebotsanfragen und verfolgen Sie den Status Ihrer RFQs.

) } [V0_FILE]typescriptreact:file="app/tools/analytics/page.tsx" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { BarChart3, TrendingUp, Users, ShoppingCart } from "lucide-react" const analyticsCards = [ { title: "Lieferanten Performance", value: "94.2%", change: "+2.1%", icon: TrendingUp, }, { title: "Aktive Lieferanten", value: "247", change: "+12", icon: Users, }, { title: "Bestellvolumen", value: "€2.4M", change: "+8.3%", icon: ShoppingCart, }, { title: "Kosteneinsparungen", value: "€180K", change: "+15.2%", icon: BarChart3, }, ] export default function AnalyticsPage() { return (

Analytics

{analyticsCards.map((card) => ( {card.title}

{card.value}

{card.change} vom letzten Monat

))}

Detaillierte Analysen

Hier finden Sie detaillierte Analysen zu Ihren Lieferanten, Beschaffungsprozessen und Kosteneinsparungen.

) } [V0_FILE]typescriptreact:file="components/floating-chatbot.tsx" "use client" import type React from "react" import { useState } from "react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { ScrollArea } from "@/components/ui/scroll-area" import { MessageCircle, X, Send, Bot, User } from "lucide-react" interface Message { id: string text: string sender: "user" | "bot" timestamp: Date } export function FloatingChatbot() { const [isOpen, setIsOpen] = useState(false) const [messages, setMessages] = useState([ { id: "1", text: "Hallo! Ich bin Ihr ACME Tacto Assistent. Wie kann ich Ihnen bei der Lieferantenverwaltung helfen?", sender: "bot", timestamp: new Date(), }, ]) const [inputValue, setInputValue] = useState("") const handleSendMessage = () => { if (!inputValue.trim()) return const userMessage: Message = { id: Date.now().toString(), text: inputValue, sender: "user", timestamp: new Date(), } setMessages((prev) => [...prev, userMessage]) setInputValue("") // Simulate bot response setTimeout(() => { const botMessage: Message = { id: (Date.now() + 1).toString(), text: "Vielen Dank für Ihre Nachricht. Ich leite Sie an einen Spezialisten weiter, der Ihnen bei Ihrer Anfrage helfen kann.", sender: "bot", timestamp: new Date(), } setMessages((prev) => [...prev, botMessage]) }, 1000) } const handleKeyPress = (e: React.KeyboardEvent) => { if (e.key === "Enter") { handleSendMessage() } } return ( <> {/* Chat Interface */} {isOpen && ( ACME Tacto Support

{messages.map((message) => (

{message.sender === "bot" && (

)}

{message.text}

{message.sender === "user" && (

)}

))}

setInputValue(e.target.value)} onKeyPress={handleKeyPress} className="flex-1" />

)} {/* Floating Button */} ) } [V0_FILE]typescriptreact:file="app/layout.tsx" import "./globals.css" import { Inter } from "next/font/google" import { ThemeProvider } from "@/components/theme-provider" import { Sidebar } from "@/components/sidebar" import { TopNav } from "@/components/top-nav" import { TooltipProvider } from "@/components/ui/tooltip" import { SettingsProvider } from "@/contexts/settings-context" import { FloatingChatbot } from "@/components/floating-chatbot" import type React from "react" const inter = Inter({ subsets: ["latin"] }) export const metadata = { title: "ACME Tacto - Lieferanten Management Platform", description: "Eine moderne, responsive Plattform für Lieferanten-Sourcing und Supply Chain Management", } export default function RootLayout({ children, }: { children: React.ReactNode }) { return (

{children}

) } [V0_FILE]typescriptreact:file="components/sidebar.tsx" isFixed="true" isQuickEdit="true" "use client" import React from "react" import { useState, useRef, useCallback } from "react" import Link from "next/link" import { usePathname } from "next/navigation" import { Home, Search, Building2, ShoppingCart, CreditCard, Receipt, FileText, MessageSquare, BarChart3, ClipboardList, StickyNote, ChevronDown, ChevronRight, Menu, ChevronLeft, } from "lucide-react" import { cn } from "@/lib/utils" import { Button } from "@/components/ui/button" import { Tooltip, TooltipContent, TooltipTrigger, TooltipProvider } from "@/components/ui/tooltip" const navigation = [ { name: "Suche", href: "/search", icon: Search }, { name: "Dashboard", href: "/", icon: Home }, { name: "Lieferantendaten", href: "/lieferantendaten", icon: Building2, children: [ { name: "Lieferanten", href: "/lieferantendaten/lieferanten" }, { name: "Unternehmen", href: "/lieferantendaten/unternehmen" }, { name: "Kontakte", href: "/lieferantendaten/kontakte" }, { name: "Wechsel", href: "/lieferantendaten/wechsel" }, // Added Wechsel subpage for supplier switching ], }, { name: "Bedarfe", href: "/bedarfe", icon: ShoppingCart }, { name: "Transaktionen", href: "/transaktionen", icon: CreditCard }, { name: "Bestellungen", href: "/bestellungen", icon: Receipt }, { name: "Rechnungen", href: "/rechnungen", icon: FileText }, { name: "Dokumente", href: "/dokumente", icon: FileText }, ] const toolsNavigation = [ { name: "RFQs", href: "/tools/rfqs", icon: MessageSquare }, { name: "Abfragen", href: "/tools/abfragen", icon: ClipboardList }, { name: "Analytics", href: "/tools/analytics", icon: BarChart3 }, { name: "Auswertungen", href: "/tools/auswertungen", icon: BarChart3 }, { name: "Hinweise", href: "/tools/hinweise", icon: StickyNote }, ] export function Sidebar() { const pathname = usePathname() const [isCollapsed, setIsCollapsed] = useState(false) const [isMobileOpen, setIsMobileOpen] = useState(false) const [expandedItems, setExpandedItems] = useState([]) const [sidebarWidth, setSidebarWidth] = useState(288) // 18rem = 288px const [isResizing, setIsResizing] = useState(false) const sidebarRef = useRef(null) const minWidth = 200 const maxWidth = 400 const handleMouseDown = useCallback((e: React.MouseEvent) => { e.preventDefault() setIsResizing(true) }, []) const handleMouseMove = useCallback( (e: MouseEvent) => { if (!isResizing) return const newWidth = e.clientX if (newWidth >= minWidth && newWidth <= maxWidth) { setSidebarWidth(newWidth) } }, [isResizing, minWidth, maxWidth], ) const handleMouseUp = useCallback(() => { setIsResizing(false) }, []) // Add event listeners for mouse move and up React.useEffect(() => { if (isResizing) { document.addEventListener("mousemove", handleMouseMove) document.addEventListener("mouseup", handleMouseUp) document.body.style.cursor = "col-resize" document.body.style.userSelect = "none" } else { document.removeEventListener("mousemove", handleMouseMove) document.removeEventListener("mouseup", handleMouseUp) document.body.style.cursor = "" document.body.style.userSelect = "" } return () => { document.removeEventListener("mousemove", handleMouseMove) document.removeEventListener("mouseup", handleMouseUp) document.body.style.cursor = "" document.body.style.userSelect = "" } }, [isResizing, handleMouseMove, handleMouseUp]) const toggleExpanded = (itemName: string) => { setExpandedItems((prev) => prev.includes(itemName) ? prev.filter((name) => name !== itemName) : [...prev, itemName], ) } const NavItem = ({ item, isBottom = false }) => { const hasChildren = item.children && item.children.length > 0 const isExpanded = expandedItems.includes(item.name) const isActive = pathname === item.href || (hasChildren && item.children.some((child) => pathname === child.href)) return (

{ if (hasChildren) { toggleExpanded(item.name) } }} > {hasChildren ? ( <> {!isCollapsed && ( <> {item.name} {isExpanded ? : } )} ) : ( {!isCollapsed && {item.name}} )}

{isCollapsed && ( {item.name} )} {hasChildren && isExpanded && !isCollapsed && (

{item.children.map((child) => ( {child.name} ))}

)}

) } return ( <>

{!isCollapsed && ( ACME Tacto )}

{!isCollapsed && (

)}

) } [V0_FILE]typescriptreact:file="app/lieferantendaten/wechsel/loading.tsx" isFixed="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/search/page.tsx" "use client" import { useState } from "react" import { Card, CardContent } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { Search, Filter, FileText, Building2, Users, ShoppingCart } from "lucide-react" const searchResults = [ { id: 1, type: "supplier", title: "Becker OHG", description: "Metallverarbeitung • München", category: "Lieferant", icon: Building2, }, { id: 2, type: "contact", title: "Hans Müller", description: "Einkaufsleiter bei Wagner Metalle UG", category: "Kontakt", icon: Users, }, { id: 3, type: "document", title: "Liefervertrag_2024.pdf", description: "Vertragsdokument vom 15.03.2024", category: "Dokument", icon: FileText, }, { id: 4, type: "requirement", title: "Stahlrohre 50mm", description: "Bedarf für Q2 2024 • 500 Stück", category: "Bedarf", icon: ShoppingCart, }, ] export default function SearchPage() { const [searchTerm, setSearchTerm] = useState("") const [selectedFilter, setSelectedFilter] = useState("all") const filteredResults = searchResults.filter( (result) => (selectedFilter === "all" || result.type === selectedFilter) && (searchTerm === "" || result.title.toLowerCase().includes(searchTerm.toLowerCase()) || result.description.toLowerCase().includes(searchTerm.toLowerCase())), ) return (

Suche

Durchsuchen Sie alle Daten der Plattform

setSearchTerm(e.target.value)} className="pl-10" />

{filteredResults.map((result) => (

{result.title}

{result.category}

{result.description}

))}

{filteredResults.length === 0 && (

Keine Ergebnisse gefunden

Versuchen Sie andere Suchbegriffe oder passen Sie die Filter an.

)}

) } [V0_FILE]typescriptreact:file="app/search/loading.tsx" isFixed="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/transaktionen/page.tsx" "use client" import { Card, CardContent } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { ArrowUpRight, ArrowDownLeft, Filter, Download } from "lucide-react" const transactions = [ { id: 1, type: "payment", supplier: "Becker OHG", amount: -15420.5, date: "2024-01-15", status: "completed", reference: "INV-2024-001", }, { id: 2, type: "refund", supplier: "Wagner Metalle UG", amount: 2340.0, date: "2024-01-14", status: "pending", reference: "REF-2024-003", }, { id: 3, type: "payment", supplier: "Schmidt Metallbau GmbH", amount: -8750.25, date: "2024-01-12", status: "completed", reference: "INV-2024-002", }, ] export default function TransaktionenPage() { return (

Transaktionen

Übersicht aller Zahlungen und Transaktionen

{transactions.map((transaction) => (

{transaction.type === "payment" ? ( ) : ( )}

{transaction.supplier}

{transaction.reference}

{transaction.amount < 0 ? "-" : "+"}€ {Math.abs(transaction.amount).toLocaleString("de-DE", { minimumFractionDigits: 2 })}

{transaction.status === "completed" ? "Abgeschlossen" : "Ausstehend"} {transaction.date}

))}

) } [V0_FILE]typescriptreact:file="app/bestellungen/page.tsx" "use client" import { Card, CardContent } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { Plus, Filter, Download, Package } from "lucide-react" const orders = [ { id: "BO-2024-001", supplier: "Becker OHG", items: "Stahlrohre 50mm x 200 Stück", amount: 15420.5, date: "2024-01-15", status: "delivered", deliveryDate: "2024-01-20", }, { id: "BO-2024-002", supplier: "Wagner Metalle UG", items: "Aluminiumbleche 2mm x 50 Stück", amount: 8750.25, date: "2024-01-12", status: "in-transit", deliveryDate: "2024-01-18", }, { id: "BO-2024-003", supplier: "Schmidt Metallbau GmbH", items: "Edelstahlschrauben M8 x 1000 Stück", amount: 2340.0, date: "2024-01-10", status: "pending", deliveryDate: "2024-01-25", }, ] export default function BestellungenPage() { const getStatusColor = (status: string) => { switch (status) { case "delivered": return "bg-green-100 text-green-800" case "in-transit": return "bg-blue-100 text-blue-800" case "pending": return "bg-yellow-100 text-yellow-800" default: return "bg-gray-100 text-gray-800" } } const getStatusText = (status: string) => { switch (status) { case "delivered": return "Geliefert" case "in-transit": return "Unterwegs" case "pending": return "Ausstehend" default: return status } } return (

Bestellungen

Verwalten Sie alle Bestellungen und deren Status

{orders.map((order) => (

{order.id}

{order.supplier}

{order.items}

€{order.amount.toLocaleString("de-DE", { minimumFractionDigits: 2 })}

{getStatusText(order.status)}

Lieferung: {order.deliveryDate}

))}

) } [V0_FILE]typescriptreact:file="app/rechnungen/page.tsx" "use client" import { Card, CardContent } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { Plus, Filter, Download, FileText, Eye } from "lucide-react" const invoices = [ { id: "RE-2024-001", supplier: "Becker OHG", amount: 15420.5, date: "2024-01-15", dueDate: "2024-02-14", status: "paid", orderRef: "BO-2024-001", }, { id: "RE-2024-002", supplier: "Wagner Metalle UG", amount: 8750.25, date: "2024-01-12", dueDate: "2024-02-11", status: "pending", orderRef: "BO-2024-002", }, { id: "RE-2024-003", supplier: "Schmidt Metallbau GmbH", amount: 2340.0, date: "2024-01-10", dueDate: "2024-02-09", status: "overdue", orderRef: "BO-2024-003", }, ] export default function RechnungenPage() { const getStatusColor = (status: string) => { switch (status) { case "paid": return "bg-green-100 text-green-800" case "pending": return "bg-yellow-100 text-yellow-800" case "overdue": return "bg-red-100 text-red-800" default: return "bg-gray-100 text-gray-800" } } const getStatusText = (status: string) => { switch (status) { case "paid": return "Bezahlt" case "pending": return "Ausstehend" case "overdue": return "Überfällig" default: return status } } return (

Rechnungen

Verwalten Sie alle eingehenden Rechnungen

{invoices.map((invoice) => (

{invoice.id}

{invoice.supplier}

Bestellung: {invoice.orderRef}

€{invoice.amount.toLocaleString("de-DE", { minimumFractionDigits: 2 })}

{getStatusText(invoice.status)}

Fällig: {invoice.dueDate}

{invoice.status === "pending" && }

))}

) } [V0_FILE]typescriptreact:file="app/dokumente/page.tsx" "use client" import { Card, CardContent } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { Filter, Download, FileText, Upload, Eye, Folder } from "lucide-react" const documents = [ { id: 1, name: "Liefervertrag_Becker_2024.pdf", type: "contract", supplier: "Becker OHG", size: "2.4 MB", date: "2024-01-15", category: "Verträge", }, { id: 2, name: "Qualitätszertifikat_Wagner.pdf", type: "certificate", supplier: "Wagner Metalle UG", size: "1.8 MB", date: "2024-01-12", category: "Zertifikate", }, { id: 3, name: "Angebot_Schmidt_2024.pdf", type: "quote", supplier: "Schmidt Metallbau GmbH", size: "956 KB", date: "2024-01-10", category: "Angebote", }, { id: 4, name: "Compliance_Report_Q1.xlsx", type: "report", supplier: "Alle Lieferanten", size: "3.2 MB", date: "2024-01-08", category: "Berichte", }, ] export default function DokumentePage() { const getTypeIcon = (type: string) => { switch (type) { case "contract": return FileText case "certificate": return FileText case "quote": return FileText case "report": return FileText default: return FileText } } const getCategoryColor = (category: string) => { switch (category) { case "Verträge": return "bg-blue-100 text-blue-800" case "Zertifikate": return "bg-green-100 text-green-800" case "Angebote": return "bg-yellow-100 text-yellow-800" case "Berichte": return "bg-purple-100 text-purple-800" default: return "bg-gray-100 text-gray-800" } } return (

Dokumente

Verwalten Sie alle wichtigen Dokumente und Dateien

{documents.map((document) => { const IconComponent = getTypeIcon(document.type) return (

{document.name}

{document.supplier}

{document.category} {document.size}

{document.date}

) })}

) } [V0_FILE]typescriptreact:file="app/tools/auswertungen/page.tsx" "use client" import { Card, CardContent } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { Plus, Filter, Download, BarChart3, PieChart, TrendingUp } from "lucide-react" const evaluations = [ { id: 1, name: "Lieferanten Scorecard Q1 2024", description: "Bewertung aller Lieferanten basierend auf KPIs", type: "scorecard", date: "2024-01-15", status: "published", suppliers: 12, }, { id: 2, name: "Kostenentwicklung Analyse", description: "Trend-Analyse der Beschaffungskosten", type: "trend", date: "2024-01-12", status: "draft", suppliers: 8, }, { id: 3, name: "Risikobewertung Lieferantenbasis", description: "Umfassende Risikoanalyse aller Geschäftspartner", type: "risk", date: "2024-01-10", status: "published", suppliers: 15, }, ] export default function AuswertungenPage() { const getStatusColor = (status: string) => { switch (status) { case "published": return "bg-green-100 text-green-800" case "draft": return "bg-yellow-100 text-yellow-800" case "archived": return "bg-gray-100 text-gray-800" default: return "bg-gray-100 text-gray-800" } } const getStatusText = (status: string) => { switch (status) { case "published": return "Veröffentlicht" case "draft": return "Entwurf" case "archived": return "Archiviert" default: return status } } const getTypeIcon = (type: string) => { switch (type) { case "scorecard": return BarChart3 case "trend": return TrendingUp case "risk": return PieChart default: return BarChart3 } } return (

Auswertungen

Erstellen und verwalten Sie detaillierte Analysen und Berichte

{evaluations.map((evaluation) => { const IconComponent = getTypeIcon(evaluation.type) return (

{evaluation.name}

{evaluation.description}

{evaluation.suppliers} Lieferanten • {evaluation.date}

{getStatusText(evaluation.status)}

) })}

) } [V0_FILE]typescriptreact:file="app/tools/hinweise/page.tsx" "use client" import { Card, CardContent } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { Plus, Filter, AlertTriangle, Info, CheckCircle, Clock } from "lucide-react" const notes = [ { id: 1, title: "Preiserhöhung Becker OHG", content: "Lieferant hat Preiserhöhung von 8% für Q2 2024 angekündigt. Alternative Angebote einholen.", type: "warning", supplier: "Becker OHG", date: "2024-01-15", priority: "high", status: "open", }, { id: 2, title: "Neue Zertifizierung Wagner Metalle", content: "ISO 14001 Zertifikat erhalten. Dokumentation im System aktualisiert.", type: "info", supplier: "Wagner Metalle UG", date: "2024-01-12", priority: "medium", status: "completed", }, { id: 3, title: "Lieferverzögerung Schmidt Metallbau", content: "Lieferung um 2 Wochen verzögert aufgrund von Rohstoffengpässen. Kunden informiert.", type: "alert", supplier: "Schmidt Metallbau GmbH", date: "2024-01-10", priority: "high", status: "in-progress", }, ] export default function HinweisePage() { const getTypeIcon = (type: string) => { switch (type) { case "warning": return AlertTriangle case "info": return Info case "alert": return AlertTriangle default: return Info } } const getTypeColor = (type: string) => { switch (type) { case "warning": return "bg-yellow-100 text-yellow-800" case "info": return "bg-blue-100 text-blue-800" case "alert": return "bg-red-100 text-red-800" default: return "bg-gray-100 text-gray-800" } } const getPriorityColor = (priority: string) => { switch (priority) { case "high": return "bg-red-100 text-red-800" case "medium": return "bg-yellow-100 text-yellow-800" case "low": return "bg-green-100 text-green-800" default: return "bg-gray-100 text-gray-800" } } const getStatusIcon = (status: string) => { switch (status) { case "completed": return CheckCircle case "in-progress": return Clock case "open": return Clock default: return Clock } } const getStatusColor = (status: string) => { switch (status) { case "completed": return "bg-green-100 text-green-800" case "in-progress": return "bg-blue-100 text-blue-800" case "open": return "bg-yellow-100 text-yellow-800" default: return "bg-gray-100 text-gray-800" } } const getStatusText = (status: string) => { switch (status) { case "completed": return "Abgeschlossen" case "in-progress": return "In Bearbeitung" case "open": return "Offen" default: return status } } return (

Hinweise

Verwalten Sie wichtige Notizen und Erinnerungen zu Lieferanten

{notes.map((note) => { const TypeIcon = getTypeIcon(note.type) const StatusIcon = getStatusIcon(note.status) return (

{note.title}

{note.content}

{note.supplier} {note.priority === "high" ? "Hoch" : note.priority === "medium" ? "Mittel" : "Niedrig"} {note.date}

{getStatusText(note.status)}

{note.status !== "completed" && }

) })}

) } [V0_FILE]typescriptreact:file="components/purchase-volume-charts.tsx" isFixed="true" isQuickEdit="true" "use client" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { ChartContainer, ChartTooltip, ChartTooltipContent } from "@/components/ui/chart" import { Bar, BarChart, XAxis, YAxis, ResponsiveContainer, PieChart, Pie, Cell } from "recharts" import { ExternalLink } from "lucide-react" const purchaseVolumeData = [ { year: "2018", volume: 35 }, { year: "2019", volume: 38 }, { year: "2020", volume: 28 }, { year: "2021", volume: 42 }, { year: "2022", volume: 28 }, { year: "2023", volume: 35 }, { year: "2024", volume: 38 }, { year: "2025", volume: 8 }, ] const productGroupData = [ { name: "Elektronik", value: 25, color: "#3b82f6" }, { name: "Maschinen", value: 20, color: "#8b5cf6" }, { name: "Rohstoffe", value: 15, color: "#10b981" }, { name: "Chemikalien", value: 12, color: "#f59e0b" }, { name: "Textilien", value: 10, color: "#ef4444" }, { name: "Metalle", value: 8, color: "#06b6d4" }, { name: "Sonstige", value: 10, color: "#84cc16" }, ] const countryData = [ { country: "Deutschland", volume: 1500, color: "#3b82f6" }, { country: "China", volume: 1200, color: "#8b5cf6" }, { country: "USA", volume: 800, color: "#10b981" }, { country: "Italien", volume: 600, color: "#f59e0b" }, { country: "Frankreich", volume: 400, color: "#ef4444" }, ] export function PurchaseVolumeCharts() { return (

Einkaufsvolumen } />

40M

Warengruppenvolumen {productGroupData.map((entry, index) => ( ))} } />

2025

Einkaufsvolumen nach Ländern

Deutschland

Einkaufsvolumen 2025 (€)

{countryData.map((country) => (

{country.country}

{country.volume}k€

))}

) } [V0_FILE]typescriptreact:file="app/lieferantendaten/wechsel/prozess/page.tsx" isFixed="true" isQuickEdit="true" "use client" import { useState } from "react" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { Progress } from "@/components/ui/progress" import { CheckCircle, Circle, Clock, ArrowLeft, Search, FileText, Users, Handshake, Settings, TrendingUp, } from "lucide-react" import Link from "next/link" const timelineSteps = [ { id: 1, title: "Planung & Vorbereitung", description: "Anforderungen definieren und Wechselstrategie entwickeln", icon: Settings, status: "completed", duration: "1-2 Wochen", tasks: [ "Aktuelle Lieferantenbewertung", "Anforderungskatalog erstellen", "Budget und Zeitplan festlegen", "Stakeholder informieren", ], }, { id: 2, title: "Lieferantensuche", description: "Potentielle alternative Lieferanten identifizieren", icon: Search, status: "current", duration: "2-3 Wochen", tasks: [ "Marktrecherche durchführen", "Lieferantendatenbank durchsuchen", "Empfehlungen einholen", "Vorauswahl treffen", ], }, { id: 3, title: "Bewertung & Qualifikation", description: "Lieferanten bewerten und qualifizieren", icon: FileText, status: "pending", duration: "3-4 Wochen", tasks: ["RFQ versenden", "Angebote bewerten", "Referenzen prüfen", "Audits durchführen"], }, { id: 4, title: "Verhandlung", description: "Konditionen verhandeln und finalisieren", icon: Handshake, status: "pending", duration: "2-3 Wochen", tasks: [ "Preisverhandlungen", "Lieferbedingungen klären", "Qualitätsstandards definieren", "Vertragsentwurf erstellen", ], }, { id: 5, title: "Vertragsabschluss", description: "Verträge unterzeichnen und rechtlich absichern", icon: Users, status: "pending", duration: "1 Woche", tasks: ["Vertrag finalisieren", "Rechtsprüfung", "Unterschriften einholen", "Dokumentation archivieren"], }, { id: 6, title: "Übergang & Integration", description: "Wechsel durchführen und neuen Lieferanten integrieren", icon: TrendingUp, status: "pending", duration: "4-6 Wochen", tasks: ["Übergangsplan umsetzen", "Systeme integrieren", "Teams schulen", "Monitoring einrichten"], }, ] export default function WechselprozessPage() { const [selectedStep, setSelectedStep] = useState(2) // Current step const currentStep = timelineSteps.find((step) => step.id === selectedStep) const getStatusColor = (status: string) => { switch (status) { case "completed": return "text-green-600 bg-green-100" case "current": return "text-blue-600 bg-blue-100" case "pending": return "text-gray-400 bg-gray-100" default: return "text-gray-400 bg-gray-100" } } const getStatusIcon = (status: string) => { switch (status) { case "completed": return CheckCircle case "current": return Clock case "pending": return Circle default: return Circle } } const completedSteps = timelineSteps.filter((step) => step.status === "completed").length const totalSteps = timelineSteps.length const progressPercentage = (completedSteps / totalSteps) * 100 return (

Wechselprozess Timeline

Verfolgen Sie den Fortschritt Ihres Lieferantenwechsels

{/* Progress Overview */} Gesamtfortschritt {completedSteps} von {totalSteps} Schritten abgeschlossen

Start {Math.round(progressPercentage)}% abgeschlossen Abschluss

{/* Timeline */}

Prozess-Timeline Klicken Sie auf einen Schritt für Details

{timelineSteps.map((step, index) => { const StatusIcon = getStatusIcon(step.status) const StepIcon = step.icon const isSelected = selectedStep === step.id return (

{/* Connecting line */} {index < timelineSteps.length - 1 && (

)}

) })}

{/* Step Details */}

{currentStep && (

{currentStep.title} {currentStep.duration}

{currentStep.description}

Aufgaben:

{currentStep.tasks.map((task, index) => (

{task}

))}

)}

) } [V0_FILE]typescriptreact:file="app/lieferantendaten/wechsel/prozess/schritt-2/loading.tsx" isFixed="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/lieferantendaten/wechsel/prozess/schritt-6/page.tsx" "use client" import { useState } from "react" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { Progress } from "@/components/ui/progress" import { Checkbox } from "@/components/ui/checkbox" import { CheckCircle, Circle, ArrowLeft, TrendingUp } from "lucide-react" import Link from "next/link" export default function UebergangIntegrationPage() { const [completedTasks, setCompletedTasks] = useState([false, false, false, false]) const tasks = ["Übergangsplan umsetzen", "Systeme integrieren", "Teams schulen", "Monitoring einrichten"] const toggleTask = (index: number) => { const newCompletedTasks = [...completedTasks] newCompletedTasks[index] = !newCompletedTasks[index] setCompletedTasks(newCompletedTasks) } const completedCount = completedTasks.filter(Boolean).length const progressPercentage = (completedCount / tasks.length) * 100 return (

Übergang & Integration

Schritt 6 von 6 • 4-6 Wochen

{completedCount === tasks.length ? ( <> Abgeschlossen ) : ( <> In Bearbeitung )}

Übergang & Integration Wechsel durchführen und neuen Lieferanten integrieren

Integrationsphasen:

• Pilotphase mit kleinen Bestellmengen

• Schrittweise Erhöhung der Bestellvolumen

• Vollständige Integration in Lieferkette

• Kontinuierliches Monitoring und Optimierung

Aufgaben

{tasks.map((task, index) => (

toggleTask(index)} > toggleTask(index)} className="h-5 w-5" /> {task} {completedTasks[index] ? "Erledigt" : "Ausstehend"}

))}

Fortschritt

{Math.round(progressPercentage)}%

{completedCount} von {tasks.length} Aufgaben erledigt

Navigation

) } [V0_FILE]typescriptreact:file="app/lieferantendaten/wechsel/prozess/schritt-1/page.tsx" "use client" import { useState } from "react" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { Progress } from "@/components/ui/progress" import { Checkbox } from "@/components/ui/checkbox" import { CheckCircle, ArrowLeft, ArrowRight, Settings } from "lucide-react" import Link from "next/link" export default function PlanungVorbereitungPage() { const [completedTasks, setCompletedTasks] = useState([true, true, true, true]) const tasks = [ "Aktuelle Lieferantenbewertung", "Anforderungskatalog erstellen", "Budget und Zeitplan festlegen", "Stakeholder informieren", ] const toggleTask = (index: number) => { const newCompletedTasks = [...completedTasks] newCompletedTasks[index] = !newCompletedTasks[index] setCompletedTasks(newCompletedTasks) } const completedCount = completedTasks.filter(Boolean).length const progressPercentage = (completedCount / tasks.length) * 100 return (

Planung & Vorbereitung

Schritt 1 von 6 • 1-2 Wochen

Abgeschlossen

Übersicht Anforderungen definieren und Wechselstrategie entwickeln

Ziele dieses Schritts:

• Klare Anforderungen an neue Lieferanten definieren
• Bewertung der aktuellen Lieferantensituation
• Zeitplan und Budget für den Wechselprozess festlegen
• Stakeholder über geplanten Wechsel informieren

Aufgaben

{tasks.map((task, index) => (

toggleTask(index)} > toggleTask(index)} className="h-5 w-5" /> {task} {completedTasks[index] ? "Erledigt" : "Ausstehend"}

))}

Fortschritt

{Math.round(progressPercentage)}%

{completedCount} von {tasks.length} Aufgaben erledigt

Navigation

) } [V0_FILE]typescriptreact:file="app/lieferantendaten/wechsel/prozess/schritt-3/page.tsx" "use client" import { useState } from "react" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { Progress } from "@/components/ui/progress" import { Checkbox } from "@/components/ui/checkbox" import { CheckCircle, Circle, ArrowLeft, ArrowRight, FileText } from "lucide-react" import Link from "next/link" export default function BewertungQualifikationPage() { const [completedTasks, setCompletedTasks] = useState([false, false, false, false]) const tasks = ["RFQ versenden", "Angebote bewerten", "Referenzen prüfen", "Audits durchführen"] const toggleTask = (index: number) => { const newCompletedTasks = [...completedTasks] newCompletedTasks[index] = !newCompletedTasks[index] setCompletedTasks(newCompletedTasks) } const completedCount = completedTasks.filter(Boolean).length const progressPercentage = (completedCount / tasks.length) * 100 return (

Bewertung & Qualifikation

Schritt 3 von 6 • 3-4 Wochen

{completedCount === tasks.length ? ( <> Abgeschlossen ) : ( <> Ausstehend )}

Bewertung & Qualifikation Lieferanten bewerten und qualifizieren

Bewertungskriterien:

• Qualitätsstandards

• Lieferzeiten

• Preisgestaltung

• Zertifizierungen

• Referenzen

• Kapazitäten

Aufgaben

{tasks.map((task, index) => (

toggleTask(index)} > toggleTask(index)} className="h-5 w-5" /> {task} {completedTasks[index] ? "Erledigt" : "Ausstehend"}

))}

Fortschritt

{Math.round(progressPercentage)}%

{completedCount} von {tasks.length} Aufgaben erledigt

Navigation

) } [V0_FILE]typescriptreact:file="app/lieferantendaten/wechsel/prozess/schritt-4/page.tsx" "use client" import { useState } from "react" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { Progress } from "@/components/ui/progress" import { Checkbox } from "@/components/ui/checkbox" import { CheckCircle, Circle, ArrowLeft, ArrowRight, Handshake } from "lucide-react" import Link from "next/link" export default function VerhandlungPage() { const [completedTasks, setCompletedTasks] = useState([false, false, false, false]) const tasks = [ "Preisverhandlungen", "Lieferbedingungen klären", "Qualitätsstandards definieren", "Vertragsentwurf erstellen", ] const toggleTask = (index: number) => { const newCompletedTasks = [...completedTasks] newCompletedTasks[index] = !newCompletedTasks[index] setCompletedTasks(newCompletedTasks) } const completedCount = completedTasks.filter(Boolean).length const progressPercentage = (completedCount / tasks.length) * 100 return (

Verhandlung

Schritt 4 von 6 • 2-3 Wochen

{completedCount === tasks.length ? ( <> Abgeschlossen ) : ( <> Ausstehend )}

Verhandlung Konditionen verhandeln und finalisieren

Verhandlungspunkte:

• Preisgestaltung und Rabattstrukturen

• Lieferzeiten und Flexibilität

• Qualitätsstandards und SLAs

• Zahlungsbedingungen

• Vertragslaufzeit und Kündigungsfristen

Aufgaben

{tasks.map((task, index) => (

toggleTask(index)} > toggleTask(index)} className="h-5 w-5" /> {task} {completedTasks[index] ? "Erledigt" : "Ausstehend"}

))}

Fortschritt

{Math.round(progressPercentage)}%

{completedCount} von {tasks.length} Aufgaben erledigt

Navigation

) } [V0_FILE]typescriptreact:file="app/lieferantendaten/wechsel/prozess/schritt-5/page.tsx" "use client" import { useState } from "react" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { Progress } from "@/components/ui/progress" import { Checkbox } from "@/components/ui/checkbox" import { CheckCircle, Circle, ArrowLeft, ArrowRight, Users } from "lucide-react" import Link from "next/link" export default function VertragsabschlussPage() { const [completedTasks, setCompletedTasks] = useState([false, false, false, false]) const tasks = ["Vertrag finalisieren", "Rechtsprüfung", "Unterschriften einholen", "Dokumentation archivieren"] const toggleTask = (index: number) => { const newCompletedTasks = [...completedTasks] newCompletedTasks[index] = !newCompletedTasks[index] setCompletedTasks(newCompletedTasks) } const completedCount = completedTasks.filter(Boolean).length const progressPercentage = (completedCount / tasks.length) * 100 return (

Vertragsabschluss

Schritt 5 von 6 • 1 Woche

{completedCount === tasks.length ? ( <> Abgeschlossen ) : ( <> Ausstehend )}

Vertragsabschluss Verträge unterzeichnen und rechtlich absichern

Vertragskomponenten:

• Hauptvertrag mit Lieferbedingungen

• Qualitätsvereinbarung (QVB)

• Geheimhaltungsvereinbarung (NDA)

• Rahmenvertrag für zukünftige Bestellungen

Aufgaben

{tasks.map((task, index) => (

toggleTask(index)} > toggleTask(index)} className="h-5 w-5" /> {task} {completedTasks[index] ? "Erledigt" : "Ausstehend"}

))}

Fortschritt

{Math.round(progressPercentage)}%

{completedCount} von {tasks.length} Aufgaben erledigt

Navigation

) } [V0_FILE]typescriptreact:file="app/lieferantendaten/wechsel/page.tsx" isFixed="true" isQuickEdit="true" "use client" import { useState } from "react" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Badge } from "@/components/ui/badge" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Search, ArrowRight, CheckCircle, AlertTriangle, Clock, Filter } from "lucide-react" import Link from "next/link" import { useRouter } from "next/navigation" const currentSuppliers = [ { id: 1, name: "Becker OHG", category: "Metallverarbeitung", risk: "low", performance: 85, contract: "Läuft aus: 31.12.2024", issues: ["Lieferzeiten verlängert", "Preiserhöhung angekündigt"], }, { id: 2, name: "Wagner Metalle UG", category: "Rohstoffe", risk: "medium", performance: 72, contract: "Läuft aus: 15.06.2025", issues: ["Qualitätsprobleme", "Unzuverlässige Kommunikation"], }, ] const alternativeSuppliers = [ { id: 1, name: "Schmidt Metallbau GmbH", category: "Metallverarbeitung", score: 92, location: "München", certifications: ["ISO 9001", "ISO 14001"], advantages: ["Bessere Preise", "Kürzere Lieferzeiten", "Höhere Qualität"], }, { id: 2, name: "Norddeutsche Stahl AG", category: "Rohstoffe", score: 88, location: "Hamburg", certifications: ["ISO 9001", "OHSAS 18001"], advantages: ["Stabile Preise", "Zuverlässige Lieferung", "Gute Referenzen"], }, ] export default function WechselPage() { const [searchTerm, setSearchTerm] = useState("") const [selectedSupplier, setSelectedSupplier] = useState(null) const [activeTab, setActiveTab] = useState("current") const router = useRouter() const getRiskColor = (risk: string) => { switch (risk) { case "low": return "bg-green-100 text-green-800" case "medium": return "bg-yellow-100 text-yellow-800" case "high": return "bg-red-100 text-red-800" default: return "bg-gray-100 text-gray-800" } } const handleFindAlternatives = (supplier) => { router.push("/lieferantendaten/wechsel/prozess") } return (

Lieferantenwechsel

Analysieren Sie Ihre aktuellen Lieferanten und finden Sie bessere Alternativen

Aktuelle Lieferanten Alternative Lieferanten Wechsel-Analyse

setSearchTerm(e.target.value)} className="pl-8" />

{currentSuppliers.map((supplier) => (

{supplier.name} {supplier.category}

{supplier.risk === "low" && "Niedriges Risiko"} {supplier.risk === "medium" && "Mittleres Risiko"} {supplier.risk === "high" && "Hohes Risiko"}

Performance

{supplier.performance}%

Vertrag

{supplier.contract}

{supplier.issues.length > 0 && (

Aktuelle Probleme:

{supplier.issues.map((issue, index) => ( {issue} ))}

)} ))}

{selectedSupplier && (

Alternativen für {selectedSupplier.name} ({selectedSupplier.category})

)}

{alternativeSuppliers.map((supplier) => (

{supplier.name} {supplier.category} • {supplier.location}

{supplier.score}

Match Score

Zertifizierungen:

{supplier.certifications.map((cert, index) => ( {cert} ))}

Vorteile:

{advantage}

))}

Wechsel-Analyse Dashboard Bewerten Sie die Auswirkungen eines Lieferantenwechsels

€125K

Potentielle Einsparungen

4-6

Wochen Übergangszeit

Mittel

Wechselrisiko

) } [V0_FILE]typescriptreact:file="app/lieferantendaten/wechsel/prozess/schritt-2/page.tsx" isFixed="true" isQuickEdit="true" "use client" import { useState } from "react" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { Progress } from "@/components/ui/progress" import { Checkbox } from "@/components/ui/checkbox" import { Label } from "@/components/ui/label" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { CheckCircle, Clock, ArrowLeft, ArrowRight, Search, Building, Star } from "lucide-react" import Link from "next/link" import { useRouter } from "next/navigation" export default function LieferantensuchePage() { const [completedTasks, setCompletedTasks] = useState([true, true, false, false]) const [searchCriteria, setSearchCriteria] = useState({ branche: "Automotive", region: "Europa", zertifizierung: "ISO 9001", kapazitaet: ">1000 Einheiten/Monat", }) const [hasSearched, setHasSearched] = useState(false) const [selectedSupplier, setSelectedSupplier] = useState(null) const router = useRouter() const tasks = [ "Suchkriterien definieren", "Marktrecherche durchführen", "Lieferanten kontaktieren", "Erste Bewertung erstellen", ] const suppliers = [ { id: "1", name: "TechParts GmbH", location: "München", rating: 4.8, status: "Vorqualifiziert" }, { id: "2", name: "AutoSupply AG", location: "Stuttgart", rating: 4.6, status: "In Prüfung" }, { id: "3", name: "Precision Components", location: "Hamburg", rating: 4.7, status: "Kontaktiert" }, { id: "4", name: "Industrial Solutions", location: "Berlin", rating: 4.5, status: "Recherche" }, ] const toggleTask = (index: number) => { const newCompletedTasks = [...completedTasks] newCompletedTasks[index] = !newCompletedTasks[index] setCompletedTasks(newCompletedTasks) } const handleSearch = () => { setHasSearched(true) const newCompletedTasks = [...completedTasks] newCompletedTasks[0] = true newCompletedTasks[1] = true setCompletedTasks(newCompletedTasks) } const handleSupplierClick = (supplierId: string) => { setSelectedSupplier(supplierId) const newCompletedTasks = [...completedTasks] newCompletedTasks[2] = true setCompletedTasks(newCompletedTasks) router.push(`/lieferantendaten/wechsel/prozess/schritt-2/profil/${supplierId}`) } const completedCount = completedTasks.filter(Boolean).length const progressPercentage = (completedCount / tasks.length) * 100 return (

Lieferantensuche

Schritt 2 von 6 • 2-3 Wochen

{completedCount === tasks.length ? ( <> Abgeschlossen ) : ( <> In Bearbeitung )}

Lieferantensuche Potentielle alternative Lieferanten identifizieren

Suchkriterien:

Branche:

Region:

Zertifizierung:

Kapazität:

{hasSearched && ( Gefundene Lieferanten 12 potentielle Kandidaten identifiziert

{suppliers.map((supplier, index) => (

handleSupplierClick(supplier.id)} >

{supplier.name}

{supplier.location}

{supplier.rating}

{supplier.status}

))}

)} Aufgaben

{tasks.map((task, index) => (

toggleTask(index)} > toggleTask(index)} className="h-5 w-5" /> {task} {completedTasks[index] ? "Erledigt" : "Ausstehend"}

))}

Fortschritt

{Math.round(progressPercentage)}%

{completedCount} von {tasks.length} Aufgaben erledigt

Navigation

) } [V0_FILE]typescriptreact:file="app/lieferantendaten/wechsel/prozess/schritt-2/profil/[id]/page.tsx" isFixed="true" isQuickEdit="true" "use client" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { ArrowLeft, Building, Phone, Globe, Mail, MapPin, Award, Users, Calendar, TrendingUp } from "lucide-react" import Link from "next/link" import { useParams, useRouter } from "next/navigation" import { useState } from "react" export default function SupplierProfilePage() { const params = useParams() const router = useRouter() const supplierId = params.id as string const [isInquirySent, setIsInquirySent] = useState(false) const supplierData = { "1": { name: "TechParts GmbH", location: "München, Deutschland", rating: 4.8, status: "Vorqualifiziert", website: "www.techparts-gmbh.de", phone: "+49 89 123456789", email: "info@techparts-gmbh.de", founded: "1995", employees: "250-500", description: "Führender Hersteller von Präzisionsteilen für die Automobilindustrie mit über 25 Jahren Erfahrung.", services: [ "CNC-Bearbeitung", "Spritzguss", "Oberflächenbehandlung", "Qualitätsprüfung", "Just-in-Time Lieferung", ], certifications: ["ISO 9001:2015", "IATF 16949", "ISO 14001"], capacity: "15.000 Teile/Monat", leadTime: "2-3 Wochen", minOrder: "500 Stück", paymentTerms: "30 Tage netto", }, "2": { name: "AutoSupply AG", location: "Stuttgart, Deutschland", rating: 4.6, status: "In Prüfung", website: "www.autosupply-ag.com", phone: "+49 711 987654321", email: "kontakt@autosupply-ag.com", founded: "2001", employees: "100-250", description: "Spezialist für Automotive-Komponenten und Systemlösungen mit Fokus auf Innovation und Nachhaltigkeit.", services: ["Systemintegration", "Prototyping", "Serienproduktion", "Logistik", "Engineering Support"], certifications: ["ISO 9001:2015", "ISO 14001", "OHSAS 18001"], capacity: "12.000 Teile/Monat", leadTime: "3-4 Wochen", minOrder: "1.000 Stück", paymentTerms: "45 Tage netto", }, "3": { name: "Precision Components", location: "Hamburg, Deutschland", rating: 4.7, status: "Kontaktiert", website: "www.precision-components.de", phone: "+49 40 555666777", email: "sales@precision-components.de", founded: "1988", employees: "500-1000", description: "Internationaler Anbieter von Präzisionskomponenten mit modernsten Fertigungstechnologien.", services: ["Präzisionsfertigung", "Werkzeugbau", "Montage", "Prüftechnik", "Globale Lieferung"], certifications: ["ISO 9001:2015", "IATF 16949", "ISO 14001", "ISO 45001"], capacity: "20.000 Teile/Monat", leadTime: "2-3 Wochen", minOrder: "250 Stück", paymentTerms: "30 Tage netto", }, "4": { name: "Industrial Solutions", location: "Berlin, Deutschland", rating: 4.5, status: "Recherche", website: "www.industrial-solutions.com", phone: "+49 30 444555666", email: "info@industrial-solutions.com", founded: "2005", employees: "50-100", description: "Agiler Lösungsanbieter für industrielle Komponenten mit flexiblen Fertigungskapazitäten.", services: ["Flexible Fertigung", "Rapid Prototyping", "Kleinserien", "Beratung", "Digitale Services"], certifications: ["ISO 9001:2015", "ISO 14001"], capacity: "8.000 Teile/Monat", leadTime: "1-2 Wochen", minOrder: "100 Stück", paymentTerms: "14 Tage netto", }, } const supplier = supplierData[supplierId as keyof typeof supplierData] if (!supplier) { return

Lieferant nicht gefunden

} const handleSendInquiry = () => { const inquiryData = { id: Date.now(), supplierId: supplierId, supplierName: supplier.name, type: "supplier_switch", subject: `Lieferantenwechsel Anfrage - ${supplier.name}`, message: `Sehr geehrte Damen und Herren, wir sind auf der Suche nach einem neuen Lieferanten für unsere Automobilkomponenten und sind auf Ihr Unternehmen aufmerksam geworden. Könnten Sie uns bitte ein Angebot für folgende Spezifikationen zusenden: - Branche: Automotive - Kapazität: >1000 Einheiten/Monat - Zertifizierung: ISO 9001 Wir würden uns über eine zeitnahe Rückmeldung freuen. Mit freundlichen Grüßen Ihr ACME Tacto Team`, status: "sent", createdAt: new Date().toISOString(), email: supplier.email, phone: supplier.phone, } const existingInquiries = JSON.parse(localStorage.getItem("supplierInquiries") || "[]") existingInquiries.push(inquiryData) localStorage.setItem("supplierInquiries", JSON.stringify(existingInquiries)) setIsInquirySent(true) setTimeout(() => { router.push("/tools/lieferantenwechsel") }, 2000) } return (

{supplier.name}

{supplier.location}

{supplier.status}

Unternehmensprofil

{supplier.description}

Gegründet: {supplier.founded}

Mitarbeiter: {supplier.employees}

Bewertung: {supplier.rating}/5.0

Leistungen & Services

{supplier.services.map((service, index) => ( {service} ))}

Zertifizierungen

{supplier.certifications.map((cert, index) => ( {cert} ))}

Kontaktinformationen

{supplier.website}

{supplier.phone}

{supplier.email}

Lieferkonditionen

Kapazität: {supplier.capacity}

Lieferzeit: {supplier.leadTime}

Mindestmenge: {supplier.minOrder}

Zahlungsziel: {supplier.paymentTerms}

Aktionen

) } [V0_FILE]typescriptreact:file="app/tools/abfragen/page.tsx" isFixed="true" isQuickEdit="true" "use client" import { Card, CardContent } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { Plus, Filter, Search, Database, BarChart3, MessageSquare } from "lucide-react" import { useEffect, useState } from "react" export default function AbfragenPage() { const [supplierInquiries, setSupplierInquiries] = useState([]) useEffect(() => { const inquiries = JSON.parse(localStorage.getItem("supplierInquiries") || "[]") setSupplierInquiries(inquiries) }, []) const queries = [ { id: 1, name: "Lieferanten Performance Q1", description: "Analyse der Lieferantenleistung im ersten Quartal", type: "performance", lastRun: "2024-01-15", status: "completed", results: 45, }, { id: 2, name: "Kostenanalyse Metallrohstoffe", description: "Preisvergleich verschiedener Metalllieferanten", type: "cost", lastRun: "2024-01-12", status: "running", results: null, }, { id: 3, name: "Compliance Status Check", description: "Überprüfung der Zertifizierungen aller Lieferanten", type: "compliance", lastRun: "2024-01-10", status: "completed", results: 23, }, ] const getStatusColor = (status: string) => { switch (status) { case "completed": return "bg-green-100 text-green-800" case "running": return "bg-blue-100 text-blue-800" case "failed": return "bg-red-100 text-red-800" default: return "bg-gray-100 text-gray-800" } } const getStatusText = (status: string) => { switch (status) { case "completed": return "Abgeschlossen" case "running": return "Läuft" case "failed": return "Fehlgeschlagen" default: return status } } const getTypeIcon = (type: string) => { switch (type) { case "performance": return BarChart3 case "cost": return Database case "compliance": return Search default: return Database } } return (

Abfragen

Erstellen und verwalten Sie Datenabfragen und Analysen

{supplierInquiries.length > 0 && (

Lieferantenanfragen

{supplierInquiries.map((inquiry: any) => (

{inquiry.subject}

An: {inquiry.supplierName}

Gesendet: {new Date(inquiry.createdAt).toLocaleDateString("de-DE")}

Gesendet

))}

)}

Datenabfragen

{queries.map((query) => { const IconComponent = getTypeIcon(query.type) return (

{query.name}

{query.description}

Zuletzt ausgeführt: {query.lastRun}

{getStatusText(query.status)}

{query.results &&

{query.results} Ergebnisse

}

) })}

) } [V0_FILE]typescriptreact:file="app/tools/lieferantenwechsel/page.tsx" "use client" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { MessageSquare, Phone, Mail, Calendar, Clock, User, Building } from "lucide-react" import { useEffect, useState } from "react" export default function LieferantenwechselPage() { const [inquiries, setInquiries] = useState([]) const [selectedInquiry, setSelectedInquiry] = useState(null) useEffect(() => { const supplierInquiries = JSON.parse(localStorage.getItem("supplierInquiries") || "[]") setInquiries(supplierInquiries) if (supplierInquiries.length > 0) { setSelectedInquiry(supplierInquiries[0]) } }, []) const mockCorrespondence = [ { id: 1, type: "outgoing", subject: "Lieferantenwechsel Anfrage", date: "2024-01-15 10:30", from: "ACME Tacto", to: "TechParts GmbH", content: "Sehr geehrte Damen und Herren, wir sind auf der Suche nach einem neuen Lieferanten...", }, { id: 2, type: "incoming", subject: "Re: Lieferantenwechsel Anfrage", date: "2024-01-15 14:20", from: "TechParts GmbH", to: "ACME Tacto", content: "Vielen Dank für Ihre Anfrage. Gerne unterbreiten wir Ihnen ein Angebot...", }, { id: 3, type: "outgoing", subject: "Nachfrage zu Lieferzeiten", date: "2024-01-16 09:15", from: "ACME Tacto", to: "TechParts GmbH", content: "Könnten Sie uns bitte weitere Details zu den Lieferzeiten mitteilen?", }, ] return (

Lieferantenwechsel

Verwalten Sie die Korrespondenz mit potenziellen Lieferanten

Aktive Anfragen

{inquiries.map((inquiry: any) => ( setSelectedInquiry(inquiry)} >

{inquiry.supplierName}

{new Date(inquiry.createdAt).toLocaleDateString("de-DE")}

Aktiv

))}

{selectedInquiry ? ( Korrespondenz Details Timeline Korrespondenz mit {selectedInquiry.supplierName} {mockCorrespondence.map((message) => (

{message.from}

{message.date}

{message.subject}

{message.content}

))} Lieferantendetails

{selectedInquiry.email}

{selectedInquiry.phone}

Anfrage gesendet: {new Date(selectedInquiry.createdAt).toLocaleDateString("de-DE")}

Status: {selectedInquiry.status}

Ursprüngliche Nachricht:

{selectedInquiry.message}

Aktivitäts-Timeline

Anfrage gesendet

{new Date(selectedInquiry.createdAt).toLocaleString("de-DE")}

E-Mail zugestellt

Vor 2 Stunden

Warten auf Antwort

Aktuell

) : (

Keine Anfragen vorhanden

Senden Sie eine Anfrage an einen Lieferanten, um hier die Korrespondenz zu verwalten.

)}

) } [V0_FILE]typescriptreact:file="app/tools/lieferantenwechsel/loading.tsx" export default function Loading() { return (

) } [V0_FILE]typescriptreact:file="app/analytics/loading.tsx" export default function Loading() { return (

{Array.from({ length: 4 }).map((_, i) => (

))}

) }

Accounts

Recent Transactions

Upcoming Events

{event.title}

Upcoming Events

{title}

Dashboard

Business Metrics

Settings

{metric.title}

Analytics

Dashboard Overview

Detailed Analytics

{item.title}

Lieferanten

Kontakte

Bedarfe

RFQs

Analytics

Suche

{result.title}

Keine Ergebnisse gefunden

Transaktionen

{transaction.supplier}

Bestellungen

{order.id}

Rechnungen

{invoice.id}

Dokumente

{document.name}

Auswertungen

{evaluation.name}

Hinweise

{note.title}

Wechselprozess Timeline

{step.title}

Aufgaben:

Übergang & Integration

Integrationsphasen:

Planung & Vorbereitung

Ziele dieses Schritts:

Bewertung & Qualifikation

Bewertungskriterien:

Verhandlung

Verhandlungspunkte:

Vertragsabschluss

Vertragskomponenten:

Lieferantenwechsel

Lieferantensuche

Suchkriterien:

{supplier.name}

Abfragen

Lieferantenanfragen

{inquiry.subject}

Datenabfragen

{query.name}

Lieferantenwechsel

Aktive Anfragen

{inquiry.supplierName}

{message.subject}

Ursprüngliche Nachricht:

Keine Anfragen vorhanden

About

Tags

Share

About

Tags

Share

More from jeffmpan

About

Tags

Share

About

Tags

Share

More from jeffmpan